以下情況會(huì)生成stacking context:

1. html中的根元素
2. position屬性值為"absolute"或者"relative"并且z-index屬性值不是"auto"的元素
3. position屬性值為"fixed"或者"sticky" (sticky是設(shè)置手機(jī)瀏覽器的) 的元素
4. 父元素是flex布局并且z-index的值不是"auto"的元素
5. opacity (透明度) 小于1的元素
6. "mix-blend-mode"屬性值不是"normal"的元素
7. 有以下任何一個(gè)屬性并且屬性值不是"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中, 子元素按照同樣的規(guī)則進(jìn)行stack. 值得注意的是, z-index值只在該元素的父元素中有意義. 子級(jí)stacking context會(huì)被自動(dòng)地按照一個(gè)父級(jí)stacking context的獨(dú)立單元對(duì)待.

stacking context的層級(jí)是html元素層級(jí)的一個(gè)子集, 因?yàn)橹挥幸恍┰貢?huì)創(chuàng)建stacking context. 我們說不會(huì)創(chuàng)建自己stacking context的元素會(huì)父級(jí)stacking context包含.

翻譯自 The stacking context
參考 層疊上下文