CSS教程:定位属性在元素中的层级关系

注意：这里把position : static这个默认的定位属性值同意认为没有定位，position:relative、position:absolute和position:fixed都认为是有定位 。position:fixed在ie6下未支持，所以本位不做实例，在其他浏览器下同样适用。

一、在没有定位属性的兄弟元素中，一般在html结构下面的元素层级高于结构上面的元素。

二，兄弟元素中有定位属性的元素层级高于没有这两个属性的其他兄弟元素。

看一个在结构上面元素上加position:absolute例子，这个可能大家很常用：

<div style="width:400px; height:200px; background:#000; color:#FFF; position:absolute">结构上面的元素:width:400px; height:200px;<br />
这里黑色的可见高度加起来是200px,红色的元素被遮罩了。</div>
<div style="width:500px; height:100px;background:red; color:#FFF">结构下面的元素:width:500px; height:100px;</div>           

三、兄弟元素中有position:relative和position:absolute定位属性的元素，结构下面的元素层级高于结构上面的元素，但是有z-index设置时，z-index值大者居上。

看一个在例子：

<div style="width:500px; height:140px; background:#000; position:relative; z-index:100"></div>
<div style="position:absolute;top:0; width:600px; height:120px;background:red; z-index:99"></div>

四、非兄弟元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

1.子元素的z-index无论多大，父元素大者居上

2.父元素居下，子元素也可以居上

原文地址：http://www.webjx.com/css/divcss-19559.html

转载于:https://www.cnblogs.com/enson99/archive/2011/10/19/2217782.html