堆叠顺序
z-index看上去很简单，z-index值大的元素在z-index值小的元素前面，对吧？但其实这只是z-index的一部分用法。很多程序猿都觉得很简单，没有花太多时间去认真阅读规则
HTML中的每一元素都是在其他元素的前面或者后面。这是众所周知的堆叠顺序（Stacking Order）
如果没有涉及z-index和position属性的话，那规则很简单，堆叠顺序就是元素在HTML中出现的顺序。(当然如果你对行内元素使用负margin的话，可能情况会复杂一些。)
加上position属性的话，就是所有定位了得元素在没有被定位的元素前面。（一个元素被定位的意思这里指的是它有一个position属性，但是不是static，而是relative,absolute等）
再加上z-index属性，事情就变得有点诡异。首先z-index值越大，越靠前。但是z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话，是不会有效果的。还有就是z-index会创建一个堆叠的上下文（Stacking Contexts），我们可以理解为一个层。
堆叠上下文
同一个父元素下面的元素会受父元素的堆叠顺序影响，所以堆叠上下文是我们理解z-index和堆叠顺序的关键。（下面为了简化，我们称堆叠上下文为层。）
每一个层都有唯一的根节点。当一个元素创建一个层，那么它的所有子元素都会受到父元素的堆叠顺序影响。意味着如果一个元素位于一个最低位置的层，那你z-index设置得再大，它也不会出现在其它层元素的上面。
现在我们来说说什么情况下会产生新的层：
- 当一个元素位于HTML文档的最外层（元素）
- 当一个元素被定位了并且拥有一个z-index值（不为auto）
- 当一个元素被设置了opacity，transforms, filters, css-regions, paged media等属性。
关于上面的第三条，是很多非w3c规范里面的文章很少提到的。通常来讲，如果一个CSS属性需要做一些特效的话，它都会创建一个新的层。
同一层里面的(兄弟节点的)堆叠顺序
下面是同一层里面的堆叠顺序（从后到前）：
- 层的根元素
- 被定位了得元素并且z-index值为负，相同z-index的情况下，按照HTML元素的书写顺序排列，下面相同。
- 没有被定位的元素
- 被定位的元素，并且z-index值为auto(即默认值)
- 被定位了的元素并且z-index值为正。(不被定位的元素z-index设置无效)
注意：z-index值为负的元素比较特殊，他们会先被绘制，意味着他们可以出现在其他元素的后面，甚至出现在它的父元素后面。但是必要条件是该元素必须与父元素处于同一层，并且父元素不是这个层的根元素。一个很好的例子
理解了如何和什么时候会产生一个新的层，那么下次如果你遇到z-index值设了很大，但是不起作用的话就去看看它的祖先是否产生了一个新的层。