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

如图显示：

=====================分割线===========================

看一个在结构上面元素上加position:relative例子，这个可以用来做很多事情，特别是选项效果，还有元素不想脱离文档流的时候：

<div style="width:400px; height:200px; background:#000; color:#FFF; position:relative">结构上面的元素:width:400px; height:200px;<br />
这里黑色的可见高度加起来是200px,红色的元素的50高度被遮罩了。</div>
<div style="width:500px; height:100px;background:red; margin-top:-50px; 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.父元素居下，子元素也可以居上，如图：

或者看这段代码：

<div style="width:800px; height:160px; background:#CDCDCD">
<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>
</div>
<div style="background:#00F;width:600px; height:130px; margin-top:-50px"></div>

3.结合以上两点，看个更加复杂的，如图：

有遗漏或者不足的地方，欢迎大家留言补充和斧正。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!