需求场景
考虑以下场景，A元素包含B，C元素，B元素包含B1元素，C元素包含C1元素。为什么C1元素的z-index明明很高，却始终在B1元素下面？
<div id="A" style="position: relative;">
<div id="B">
<div id="B1" style="position: absolute;z-index:1000;">B1</div>
</div>
<div id="C" style="position: relative;z-index: 0;">
<div id="C1" style="position: absolute;z-index:9000;">C1</div>
</div>
</div>
然后我把代码稍作改动，为什么C1又在B1上面了呢？
<div id="A" style="position: relative;">
<div id="B">
<div id="B1" style="position: absolute;z-index:1000;">B1</div>
</div>
<div id="C" style="position: relative;z-index:auto;">
<div id="C1" style="position: absolute;z-index:9000;">C1</div>
</div>
</div>
解决方案
z-index的使用涉及到一个层叠上下文的概念。首先只有position元素的值为非static时，z-index才会生效，才是有意义的。每一个值为非static的position元素都会创建一个层叠上下文环境。在我们的示例中就是A层叠环境里包含B1层叠环境和C层叠环境，C层叠环境包含C1层叠环境。这里就可以发现A到C1有2层而A到B1只有1层，所以C1的z-index无论多大都不会盖住B1。
那么问题来了，为什么第二种情况把z-index=0改成auto就变了呢？因为auto不会创建层叠上下文环境！！！是个特殊值
进阶思考
其实能创建层叠上下文的不止z-index，还有transform等