HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是，往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习，总算搞清楚了其中的关系。简单总结如下：
- 只有Positioned（Position不为static的元素）元素的z-index属性才有效
- z-index可以是负数
- 没有z-index或z-index无效的元素（参见第一条）相当于z-index为0；
- 符合某些条件(注1)的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。
- 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
- z-index 0级元素中，有stacking context的元素的叠加顺序靠前
- 以上条件不能区分时，使用DOM树中的顺序决定叠加顺序。
其中细节很多，我也不确定自己的理解都是正确的。欢迎大家指正。
另外，下面是MDN中的一系列相关文章。逐层展开，写得很清楚，各位做WEB的同学可以学习一下。
- Stacking without z-index : Default stacking rules
- Stacking and float : How floating elements are handled
- Adding z-index : Using z-index to change default stacking
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
-- 2015-08-04 在和同事的沟通中，又进行了一些补充 ----------------------------------------
z-index是一个比较邪恶的东西，如果不加控制，很容易形成竞争（传说中的摁下葫芦弹起个瓢）。使用的时候应该有一些规划，不要太随意。如果你们项目使用了Less，建议定义一组常量，规定几个级别。大家都尽量想着几个级别上靠。
另外，大多数时候，其实都可以通过Dom结构的适当调整来减少z-index的使用。往往还可以实现更好的灵活性。例如：
我们知道在Web上要实现一个模态对话框，往往是通过两层div实现的，一层div覆盖全屏，阻止其他元素获得消息，一个div承载模态对话框的内容。如下：
1 <head> 2 <style> 3 .modal-backdrop { 4 position: absolute; 5 left: 0; top: 0; 6 right: 0; bottom: 0; 7 background-color: black; 8 opacity: 0.6; z-index: 1000; 9 } 10 11 .modal-dialog { 12 position: absolute; 13 width: 800px; 14 z-index: 1001; 15 } 16 </style> 17 </head> 18 <body> 19 <!-- origin web contents --> 20 <div class="modal-backdrop"></div> 21 <div class="modal-dialog"> 22 <!-- Modal dialog content --> 23 </div> 24 </body>
这样的设计，需要两个z-index值，增加了冲突的风险。并且没有办法支持多次弹出模态对话框（第一次弹出的dialog压在了第二次弹出的backdrop的上面，但是，我们期望第二次弹出的backdrop可以遮住第一次弹出的对话框内容。）。
正确的解决方法应该如下：
1 <head> 2 <style> 3 .modal-backdrop { 4 width: 100%; height: 100%; 5 background-color: black; 6 opacity: 0.6; z-index: 1000; 7 } 8 9 .modal-dialog { 10 position: absolute; 11 left: 0; top: 0; 12 right: 0; bottom: 0; 13 z-index: 1000; 14 } 15 16 .modal-content { 17 width: 800px; 18 } 19 </style> 20 </head> 21 <body> 22 <!-- origin web contents --> 23 <div class="modal-dialog"> 24 <div class="modal-backdrop"></div> 25 <div class="modal-content"> 26 <!-- Modal dialog content --> 27 </div> 28 </div> 29 </body>
通过增加了一层Dom结构，只需要使用一个z-index，而且，多次弹出的时候，后面的backdrop可以很好的覆盖前面的对话框内容。
-- 2015-09-21 发现一个细节点 ----------------------------------------
4. 符合某些条件的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。
注1：Element with transform, Element with opacity等条件中的Element如果Display是inline的，不会创建Stacking context。因此，往往需要将他们的display改为inline-block.