层叠上下文是 元素提升为一个比较特殊的图层，在三维空间中（z 轴）高出普通元素一等 的现象。判断元素在 z 轴上的堆叠顺序，不仅仅是直接比较两个元素的 z-index 值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。
层叠上下文的触发条件有：
- HTML 中的根元素
<html></html>本身就具有层叠上下文，称为“根层叠上下文”。 - 普通元素设置 position 属性为 非 static 值 并设置 z-index 属性为具体数值，产生层叠上下文。
- CSS3 中的新属性也可以产生层叠上下文。
- flex
- transform
- opacticy
- filter
- will-change
- -webkit-overflow-scrolling
