css属性之z-index详解

先来解析几个概念，基本上了解概念之后就已经能够掌握z-index属性了。

所有的引用均来自css2.1规范

根元素形成根堆叠上下文。
其它堆叠上下文由任意'z-index'的计算值不为'auto'的定位的（positioned）元素（包括相对定位元素）生成，堆叠上下文不一定与包含块有关。
一些css3属性会生成堆叠上下文，比如opacity、transform等。

如果一个元素的position属性有一个除static外的值，就说它是定位的（positioned）。

堆叠层级，也就是z-index了。堆叠层级决定了该盒子在自己属于的那一个堆叠上下文中的位置。

在每个堆叠上下文中，下列层按从后向前的顺序绘制：（也可以参考下边的图）

1. background，border
2. z-index为负
3. block
4. float
5. inline inline-block inline-table
6. z-index为0、auto
7. z-index为正

所有的元素都会被计算自身的层叠情况，这个层叠情况依据层叠规则来决定，而元素与哪些其他的元素产生层叠取决于他自身的层叠上下文