CSS中的层叠上下文
在页面上z轴方向（垂直于页面的方向），如果存在多个元素，那么这些元素间的覆盖关系是啥？遵循的规则是啥？这就是这篇文章要讲述的内容。
前提声明： 不特别说明的话，文中在提到多个元素的位置关系时，均默认这些元素在Z轴上存在重叠关系。
什么是层叠水平
什么是层叠上下文
层叠上下文（stacking context），可以理解为一个对象/环境。跟 BFC（块级格式化上下文）很接近，也是通过CSS的某些属性设置来生成的。
举个简单的例子，在根元素\<html\> 中存在若干子元素，这些子元素遵循一定的顺序，在根元素html中进行层叠。这时候，根元素html就可以看作是一个层叠上下文。这个层叠上下文中，元素遵循一定的顺序进行覆盖。
什么是层叠水平
层叠水平定义了在同一个层叠上下文中，元素在Z轴上的显示顺序。记住，是在同一个层叠上下文中，在不同的层叠上下文中元素，不存在直接的层叠水平（间接意义上，取决于它们所在的层叠上下文元素的层叠水平）。
层叠顺序
层叠顺序定义了同一个层叠上下文中，元素在Z轴上显示顺序的规则。
“翠花，上～图～～～”
来源：张鑫旭博客
两条特别重要的原则
- 谁大谁上：具有较高层叠的水平的元素会覆盖较低层叠水平的元素（官大一级压死人）
- 后来居上：遵循同样规则的两个元素，后面的会覆盖前面的元素
特别说明： 层叠水平并不是z-index的值的大小，z-index只是用来表征层叠水平的一个参考维度。这一点可以从上图中看出。
再简单总结下：
- 创建了层叠上下文的元素比其他元素层级高。
- 两个层叠上下文相遇时，后一个层级高。如果想改变层级可以使用z-index
上example说明上面那一张图
<body>
<style>
* {
border-width: 2px;
border-style: solid;
}
</style>
<div style="z-index: 2;color: crimson; height: 50px;">z正z-index</div>
<span style="display:inline-block; height: 60px; top: -30px;background: cornflowerblue;
position: relative;"> inline / inline-block 水平盒子</span>
<p style="z-index: -1; width: 150px; height: 150px; background:powderblue; margin-top: -50px; border-color: blue;">负值
z-index</p>
<p style="width: 190px; height: 100px; background:peru; margin-top: -150px; border-color: orangered;"> Block Element</p>
<div style="float:left; width: 190px; background:darkgreen;">Float浮动盒子</div>
</body>
我们将<html>元素当作了一个层叠上下文。
会形成一个层叠上下文的条件
- 根元素：
<html>生下来就是一个层叠上下文； - z-index值为数值的定位元素：
position:relative/absolute;的元素且 设定了z-index属性的数字值； - CSS3属性：
- z-index值不为auto的flex项(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的属性值为上面任意一个。
- 元素的-webkit-overflow-scrolling设为touch