CSS position 属性

来源：互联网发布：我的世界ipad枪械js 编辑：程序博客网时间：2024/06/13 11:42

position 属性规定元素的定位类型

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位。

1.static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

2.absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

3.relative
生成相对定位的元素，相对于其原位置进行定位。
因此，”left:20” 会将元素的相对原位置向左偏移 20 像素。

4.fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。

5.inherit
规定应该从父元素继承 position 属性的值

举例说明（未与float并用）

postion:relative
该元素原位置依然保留，
使用定位关键字left/right/top/bottom 进行移动（相对自己原位置）
兄弟块元素之间定位是基于该元素移动前的位置（不受该元素影响）

关键点：
相对自己原位置，兄弟元素不受影响

演示代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>postion:relative演示代码</title>            <style>            * {                border: 1px solid #eee;            }            body {                border-color: #09f;            }            ul {                list-style: none;                width: 800px;                height: 400px;                margin: 0 auto;                border-color: black;            }            li {                width: 200px;                height: 100px;                position: relative;            }            #li1 {                border-color: red;                /*将下面注释 逐一清除即可看出效果*/                /*top: 20px;*/                /*left: 100px;*/            }            #li2 {                border-color: green;            }            #li3 {                border-color: blue;            }        </style>    </head>    <body>        <ul id=#id>            <li id=li1>li1</li>            <li id=li2>li2</li>            <li id=li3>li3</li>        </ul>    </body></html>

阅读全文

0 0

CSS position 属性

position 属性 规定元素的定位类型

position 属性规定元素的定位类型