css position 属性 (absolute 和fixed 区别)_html/css

css position 属性 (absolute 和fixed 区别)_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:43:23

Original

1242 Leute haben es durchsucht

在css3中,position的属性值有：inherit, static, relative ,absolute, fixed.

inherit 是继承父元素的position属性值,IE不支持。

static 默认值，元素出现在正常的流中，忽略（TRBL）和z-index的值。请参照下面的例子，div1由于position的值为static，所以top,left 没有起作用.

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        .divPos{            position:static;            left:100px;            top:100px;        }    </style></head><body><div class="divPos">this id div 1(position is static)</div><div class="div2">this is div 2</div></body>

Nach dem Login kopieren

　　inherit 和　static差别：在运行过程中，position 如果为static则始终保持不变，如果为inherit则可在运行过程中改变。

relative相对定位，相对于正常文档流的正常位置进行定位。如下面的例子中，一个div 相对于正常位置　偏移100px. 这里有点需要注意，positino设置relative 之后，元素仍保留未定位前的形状，它所占用的空间会保留。就是说，未定位以前，div默认是块级元素(div默认属性)，定位之后依然是块级元素。

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        body{            background-color:#ffff33;        }        .divPos{            position:relative;            left:100px;            top:100px;            background-color:#000fff;        }    </style></head><body><div class="divPos">    The position of this div is relative...</div></body>

Nach dem Login kopieren

absolute 生成绝对定位的元素，相对于static以外的第一个父元素进行定位。如下面的例子所示，

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        div{            background-color:#33ff33;        }        .divPos{            position:absolute;            left:50px;            top:50px;        }        .div3{            position:absolute;            left:50px;            top:50px;        }    </style></head><body><div class="divPos">div parent    <div>    <div class="div3">div child 3</div>    </div></div></body>

Nach dem Login kopieren

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。如下面的例子，可以滚动右边的滚动条，div 相对于窗口始终在相同的位置。其实，更恰当的例子，是做个购物车。

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        .divPos{            position:fixed;            left:50px;            top:50px;        }        .div1{            height:1000px;        }    </style></head><body><div class="divPos">    The position of this div is fixed.And this div will be always here.</div><div class="div1"></div></body>

Nach dem Login kopieren