css position 属性 (absolute 和fixed 区别)_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:43:231253瀏覽
在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> 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> 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> 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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn