CSS-层叠上下文
文档中的层叠上下文由满足以下任意一个条件的元素形成:
-
文档根元素(
html
); -
position
值为absolute
(绝对定位)或relative
(相对定位)且z-index
值不为auto
的元素; -
position
值为fixed
(固定定位)或sticky
(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持); -
flex (
flexbox
) 容器的子元素,且z-index
值不为auto
; -
opacity
属性值小于1
的元素(参见 the specification for opacity); -
mix-blend-mode
属性值不为normal
的元素; -
以下任意属性值不为
none
的元素:
-
isolation
属性值为isolate
的元素; -
-webkit-overflow-scrolling
属性值为touch
的元素; -
will-change
值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章); -
contain
属性值为layout
、paint
或包含它们其中之一的合成值(比如contain: strict
、contain: content
)的元素。
在层叠上下文中,子元素同样也按照上面解释的规则进行层叠。 重要的是,其子级层叠上下文的 z-index
值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
- 层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级。
- 每个层叠上下文都完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
- 每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。