关于z-index的总结

z-index的作用

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

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

先看下面的关系图：

 

这是效果：

 

 

 

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

 

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

1. DIV1--->5
2. DIV2--->2
3. DIV3--->4
4. DIV4--->4.6
5. DIV5--->4.1
6. DIV6--->4.3

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

不用z-index的堆叠（stacking）

两条原则：

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

例子：

层叠与浮动之间的关系

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

 

层叠顺序：

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

例子：

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的数值可以很方便的判断当前元素位于哪一层。

既定位了然后也浮动

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

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

参考：

1. z-index
2. The stacking context （重点）
3. Stacking without z-index
4. Stacking and float
5. Rational Z-Index Values