the stacking context(精简)

以下情况会生成stacking context:

1. html中的根元素
2. position属性值为"absolute"或者"relative"并且z-index属性值不是"auto"的元素
3. position属性值为"fixed"或者"sticky" (sticky是设置手机浏览器的) 的元素
4. 父元素是flex布局并且z-index的值不是"auto"的元素
5. opacity (透明度) 小于1的元素
6. "mix-blend-mode"属性值不是"normal"的元素
7. 有以下任何一个属性并且属性值不是"none"的元素:

• transform
• filter
• perspective
• clip-path
• mask / mask-image / mask-border

8. 属性isolation值为"isolate"的元素
9. "-webkit-overflow-scrolling"值为"touch"的元素
10. element with a will-change value specifying any property that would create a stacking context on non-initial value

在stacking contexts中, 子元素按照同样的规则进行stack. 值得注意的是, z-index值只在该元素的父元素中有意义. 子级stacking context会被自动地按照一个父级stacking context的独立单元对待.

stacking context的层级是html元素层级的一个子集, 因为只有一些元素会创建stacking context. 我们说不会创建自己stacking context的元素会父级stacking context包含.

翻译自 The stacking context
参考 层叠上下文