最初，我对z-index的理解只是元素设置position不为staic，设置了z-index，z-index后面的数值约大，元素在z轴上的位置越靠上；但并没有这么简单，比如，如何解释这种现象？
有两个div，p.a、p.b被包裹在一个div里，p.c被包裹在另一个盒子里，同时为两个div和.a、.b、.c设置position和z-index属性
<style>
div {
width: 200px;
height: 200px;
position: relative;
}
.box1 {
z-index: 2;
}
.box2 {
z-index: 1;
}
p {
position: absolute;
font-size: 20px;
width: 200px;
height: 200px;
}
.a {
background-color: lightblue;
z-index: 100;
}
.b {
background-color: lightgreen;
top: 40px;
left: 50px;
z-index: 200;
}
.c {
box-sizing: border-box;
padding-top: 100px;
background-color: pink;
top: -40px;
left: 20px;
z-index: 9999;
}
</style>
<body>
<div class="box1">
<p class="a">z-index: 100;</p>
<p class="b">z-index: 200;</p>
</div>
<div class="box2">
<p class="c">z-index: 9999;</p>
</div>
</body>
为何效z-index最大的9999 不是在最上层，反而在最下层呢？
实际上，判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。
什么是层叠上下文？
元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。最终表现就是它离屏幕观察者更近。
层叠上下文受哪些因素影响？
-
根层叠上下文(
html) -
position（position属性为非static值并设置z-index属性为具体数值） -
css3属性
flextransformopacityfilterwill-change-webkit-overflow-scrolling
什么是层叠等级
即元素在z轴上的上下顺序，在同一层叠上下文中，当元素发生层叠时，层叠顺序遵循下面的规则
重点来了：
- 只有在同一层叠上下文中，层叠等级才有意义；
在不同层叠上下文中，如何判断哪个元素在上面？
先比较他们所处的层叠上下文的层叠等级, 当他们所处的层叠上下文的层叠等级时，在DOM结构中后面的元素层叠等级在前面元素之上。
