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

<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>

• 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是不生效的。

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

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

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

答案是否定的。还要看父元素的等级

如图所示，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，那么它就不处于堆叠上下文中，第二点中的情况就会有所变化。

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

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

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

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

5、总结

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