以下情况会生成stacking context:
-
html中的根元素 -
position属性值为"absolute"或者"relative"并且z-index属性值不是"auto"的元素 -
position属性值为"fixed"或者"sticky"(sticky是设置手机浏览器的) 的元素 - 父元素是
flex布局并且z-index的值不是"auto"的元素 -
opacity(透明度) 小于1的元素 -
"mix-blend-mode"属性值不是"normal"的元素 - 有以下任何一个属性并且属性值不是
"none"的元素:
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
- 属性
isolation值为"isolate"的元素 -
"-webkit-overflow-scrolling"值为"touch"的元素 - element with a
will-changevalue 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
参考 层叠上下文
