【css】层叠上下文的理解

一、概念的通俗解释

层叠：内容在垂直于屏幕的虚拟z轴上依次层叠排开

上下文：context，独立的、具有隔离性的元素样式计算范围

因此，层叠上下文可以简单理解为元素在z轴上形成的样式计算上下文。

与层叠上下文相关的，还有“层叠顺序”和“层叠水平”，这两个决定了元素在z轴上的显示顺序，表示元素发生层叠时候有着特定的垂直显示顺序。

具体而言，层叠上下文具有如下特性：

• 层叠上下文比普通元素的层叠水平要更高。
• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
• 每个层叠上下文都完全独立于它的兄弟元素，当处理层叠时只考虑子元素。
• 当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

二、新建独立的层叠上下文

什么时候会再创建一个新的层叠上下文呢？这与部分样式的设置有关。

首先毋庸置疑，当我们创建一个html元素的时候，就已经新建一个初始的层叠上下文了。

除此之外，还有一些设置也会新建一个层叠上下文：

• ​​​​​​​position属性：设置为absolute、relative、fixed、sticky；
• flex 或者grid容器的子元素，并且z-index不为auto值；
• opacity属性值小于 1 的元素；
• mix-blend-mode 属性值不为normal的元素；
• 以下任意属性值不为none的元素：
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation 属性：该属性决定是否需要创建一个新的层叠上下文。值为 isolate 的元素；
• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
• contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。