元素的 z-index 属性规定了它的的层叠级别（stack level），这些级别确定了元素之间互相覆盖时的层叠顺序。但是 z-index 似乎没那么简单，这里总结一下。
首先是层叠内容（stack context）的概念。层叠内容由下列这些元素形成（其中定位元素指 position 不为默认值 static 的元素）：
- 根元素 HTML
- z-index 不为默认值 auto 的定位元素
- opacity 小于默认值 1 的元素
但其中要注意几个问题：（1）对于非定位（即 position 为 static）的元素，设置 z-index 无效；（2）在 IE8 之前，定位元素的默认 z-index 为 0；（3）在 IE9 之前，opacity 属性不被支持；（4）在 Mobile Webkit 和 Chrome 22+ 中，所有 position 为 fixed 的元素都形成一个层叠内容，无需设置 z-index（这使得在触摸设备中滚动网页更加快捷）。
所有层叠内容按照包含关系组成一个层叠树，浏览器从根元素开始按照前序遍历的方式递归地绘制它们。对于一个层叠内容，浏览器按照下面的顺序绘制该元素（先绘制的内容在底层）：
- 该元素的背景和边框
- z-index 为负数的子层叠内容
- 非定位的块级后代元素
- 非定位的浮动后代元素
- 非定位的行内后代元素
- z-index 为 auto 的定位后代元素和为 0 的子层叠内容
- z-index 为正数的定位子层叠内容
对于相同级别不同 z-index 的后代元素，按照 z-index 值从小到大绘制；对于相同级别且相同 z-index 的后代元素，按照在 DOM 树中使用前序遍历依次绘制。
我们来看在下面的例子。第一种情形中，只有 A1 是层叠内容，各元素的层叠顺序从低到高依次为 A，B，B1，A1。在第二种情形中，有 A，A1，B 这三个层叠内容；但由于绘制时是根据层叠内容递归的，虽然 A1 的 z-index 最大，层叠顺序却是 A，A1，B，B1。第二种情形说明了，如果父元素是一个层叠内容，它的后代元素能否覆盖父元素外部的元素，实际上由父元素决定，而不由后代元素决定。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.A, .B {
80px;
height: 80px;
}
.A1, .B1 {
50px;
height: 50px;
}
.A {
background: gray;
}
.A1 {
position: relative;
z-index: 4;
background: blue;
left: 60px;
}
.B {
background: red;
margin: -20px 0 0 20px;
}
.B1 {
position: relative;
background: green;
left: 20px;
top: -40px;
}
#A {
position: relative;
z-index: 1;
}
#B {
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="A">A
<div class="A1">A1</div>
</div>
<div class="B">B
<div class="B1">B1</div>
</div>
<div id="A" class="A">A
<div class="A1">A1</div>
</div>
<div id="B" class="B">B
<div class="B1">B1</div>
</div>
</body>
</html>
参考资料：
[1] Specifying the stack level: the 'z-index' property
[2] Appendix E. Elaborate description of Stacking Contexts
[3] z-index下的一些知识
[4] CSS z-index 属性的使用方法和层级树的概念
[5] Understanding CSS z-index - MDN
[6] Understanding z-index
[7] Stacking Changes Coming to position:fixed elements
[YAML] Updated: 2013-11-08 20:20:00