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是不生效的。
屏幕快照 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和正值元素的后面，还会处于非堆叠元素的后面。
