z-index的展现形式

堆叠顺序

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值设了很大，但是不起作用的话就去看看它的祖先是否产生了一个新的层。