z-index详解

z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。但是，z-index的有一些注意点，接下来一一举例。

先看一段代码：

A
a
B
b

div A和div B中各有一个div a和div b的子元素

#A,#B {
  height:14em;
  width:15em;
  margin-top:-80px
}
#a,#b{
  height:6em;
  width:11em
  margin:1em auto;
}

1、z-index在什么情况下才生效？

当元素postion:static;时，z-index是不生效的。

屏幕快照 2017-05-13 上午8.53.48.png

如图所示，即便z-index值高，div A也没有出现在前面。

只有当元素的position为：relative,absolute,fixed等脱离了文档流的定位时，z-index才会生效。

屏幕快照 2017-05-13 上午9.02.12.png

2、z-index的值是越大越靠前吗？

答案是否定的。

屏幕快照 2017-05-13 上午9.06.51.png

如图所示，div a 的z-index值为最大，却依然会被比它小的值盖住。原因在于：div a不会和div B比，只有它的父元素 div A 才能和div B比，div a只能和它的兄弟元素比z-index值，所以即使div a的z-index值很大也没用，因为此时它继承了父元素的优先级。理解这一点很重要。

3、z-index不设置和设置为0有什么区别？

z-index如果不设置就是默认值auto，那么它就不处于堆叠上下文中，第二点中的情况就会有所变化。

屏幕快照 2017-05-13 上午9.31.17.png

因为div A的z-index值没有设置，默认就是auto，不会处于堆叠上下文中，所以就不会对子元素div a构成约束，div a才无需从父元素继承优先级，可以随意地和其它元素比z-index值了。

如果z-index的值设置为0的话，该元素依然会处于堆叠上下文中，它会处于z-index为正数的元素后面，负数的前面。

屏幕快照 2017-05-13 上午9.44.47.png

4、z-index可以是负值吗？

可以的。其实由第三点的归纳就能明白了，但是需要注意的一点是，z-index为负值的元素不仅处于z-index为0的元素的后面，而且还处于其它普通元素（没有堆叠的元素position:static和z-index:auto）的后面。

屏幕快照 2017-05-13 上午9.49.08.png

屏幕快照 2017-05-13 上午9.53.46.png

5、总结

• z-index堆叠上下文只有在postion:relative/absolute/fixed时才生效，static时无效。
• 当父元素和子元素都处于堆叠上下文时，子元素继承父元素的优先级，如果父元素没有处于堆叠上下文时，即z-index:auto;或者position:static;时，子元素不会继承父元素的优先级。
• z-index为0时依然处于堆叠上下文中，比负值高，比正值低。
• z-index为负值时不仅会处于z-index为0和正值元素的后面，还会处于非堆叠元素的后面。