position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。对于后两者，一般使用较多，本博客头部的广告就使用了中间这个值。

     子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。

     对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸。值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

实例：

1. 不使用 position

这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.

2. 使用 absolute

如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.

2.1 未使用 z-index

这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0 .

<div id = “001″ style=”top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;”>001</div>
<div id = “002″ style=”top:40; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;”>002</div>
<div id = “003″ style=”top:80; left:50; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;”>003</div>

001:位于最底层
002:位于中间层
003:位于最高层

2.2 使用 z-index

z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层.

<div id = “001″ style=”top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute ;”>001</div>
<div id = “002″ style=”top:30; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;z-index:1;” >002</div>
<div id = “003″ style=”top:50; left:20; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1;”>003</div>

001:位于中间层
002:位于最高层
003:位于最底层

2.3 父子元素

对于父子元素,子元素的从属于父元素的层次,子元素在父层的上面

<div id = “001″ style=”width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;z-index:1″>001
    <div id = “002″ style=”top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:-1″ >002</div>
</div>
<div id = “003″ style=”top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:0″ >003</div>

001:位于中间层
002:位于最高层
003:位于最底层
3. 混合使用 absolute

对于没有设置 position:absolute 属性的元素 不管 z-index 设置多少都为 0, 但低于 position:absolute 中 z-index:0 的元素

<div id = “001″ style=”top:30; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;”>001</div>
<div id = “002″ style=”top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;z-index:1″ >002</div>
<div id = “003″ style=”top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1″ >003</div>

001:位于最高层
002:位于中间层
003:位于最底层

Add Comments

本文网址：http://www.tianliang.org/625423/