在一些层级较多的页面，z-index是神器，但不熟悉z-index常常导致一些层级问题很难解决。比如为什么这个z-index比那个大，还在它下面？
position !== static
z-index决定了元素在Z轴上的层级，如果你熟悉photoshop的话，其实就是等同于ps的图层。
但是z-indx的生效是有条件的，即position属性值不是static的元素。
这有可能是z-index不生效的原因之一。
父子关系下的z-index
设置一个position !== static的元素z-index的同时，会创建一个新的本地堆叠上下文，在这个元素之下，其所有的子元素的层级都会和该父元素相同，无论怎么设置z-index，即使是设置position = absolute/fixed。
这就类似ps里的组的概念，在一个组内，一个图层永远比在这个组之上的图层等级低。
所以，当“为什么这个z-index比那个大，还在它下面？”发生时，检查：
- 是否未设置position
- 是否父级设置了z-index
堆叠上下文
The stacking context.
HTML 内元素发生层叠的时候的特定垂直顺序,即元素在用户视线方向上的顺序。
在一个堆叠上下文中，元素都是有等级顺序的，即：
正z-index > 内联元素 > 浮动元素 > 块级元素 > 负z-index > border > background
具体的内容就不赘述了，参考：CSS堆叠上下文（The stacking context）