关于z-index的总结

时间：2015-05-29 08:36:31 阅读：187 评论：0 收藏：0 [点我收藏+]

标签：

z-index的作用

很多时候需要把一个元素覆盖到另一个元素之上，比如登入弹出框等，这个时候就需要z-index属性出场了。所以呢，z-index就是调节层的显示优先级，决定哪个显示在最上方。作用范围就是Positioned element，比如绝对定位，相对定位，固定定位。

层叠上下文（The stacking context）中的z-index

先看下面的关系图：

这是效果：

我们会发现虽然DIV4的index最大，但是它还是被别的元素覆盖了，这是为什么呢？

简单的理解就是z-index在不同的地方有不同的权重，在最高级（root）权重最高，相邻元素（sibling）嵌套一层权重就低一级。对于上面的例子我们可以这么计算：

DIV1--->5
DIV2--->2
DIV3--->4
DIV4--->4.6
DIV5--->4.1
DIV6--->4.3

这样计算一般的z-index嵌套就OK啦。

不用z-index的堆叠（stacking）

两条原则：

没有指定z-index值的positioned element，他们的堆叠顺序取决于在HTML文档中的顺序，越靠后出现的元素，位置越高；
非positoned element元素，不管在HTML中出现的顺序如何，总是在positioned element元素下方；

例子：

层叠与浮动之间的关系

non-positioned block的背景和边界没有被浮动元素影响，但是元素中的内容被浮动元素影响了（浮动布局的之后注意这个特性）。

层叠顺序：

根元素的背景和边界；
在普通流中的子代元素；
浮动元素；
普通流中的内联子代元素；
定位了的元素；

例子：

z-index数值分配

随便打开一个网站的首页，查看源码之后发现，z-index的数值乱七八糟，那应该怎么用合适呢？

我采取的办法是，把100设置为1档，如果需要堆叠三个层，从上到下分别是DIV3，DIV2，DIV1。那么DIV1的z-index赋值为100，DIV2的z-index赋值为200，DIV3的z-index赋值为300，这样如果将来在DIV1和DIV2之间加入一层的话还有很多余量可以选择。如果三个之间不留空隙的话以后插入一个新层就不方便啦。这样还有一个好处，就是通过查看z-index的数值可以很方便的判断当前元素位于哪一层。

既定位了然后也浮动

浮动和相对定位可以一起使用；

浮动和绝对定位不能一起使用（浮动不起任何作用）。

参考：

关于z-index的总结

标签：

原文地址：http://www.cnblogs.com/technology-life/p/4537609.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行