关于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