Stackingcontext(层叠上下文)
说明：
(1) 位于最下面的background/border特指层叠上下文元素的边框和背景色。每一个层叠顺序规则仅适用于当前层叠上下文元素的小世界。
(2)inline水平盒子指的是包括inline/inline-block/inline-table元素的”层叠顺序”,它们都是同级别的。 (3)单纯从层叠水平上看,实际上z-index:0和z-index:auto是可以看成是一样的。注意这里的措辞——“单纯从层叠水平看，实际上，定位元素设置z-index：0会建立新的层叠上下文
如何形成层叠上下文
如何形成层叠上下文 | —|— 根元素(html) | z-index不为auto的相对/绝对定位 | z-index不为auto的flex item(即父元素display: flex|inline-flex) | opacity小于1 | transform不为none | mix-blend-mode不为normal | filter不为none | perspective不为none | isolation:isolate | position:fixed | 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 | -webkit-overflow-scrolling:touch |