哪些 CSS 属性会创建堆叠上下文？

Question

我正在研究 stacking contexts 并使用创建堆叠上下文的属性进行一些测试。

我做了几次测试，发现除了z-index，当然下面的属性也会创建一个堆叠上下文：

• transform 不是none；
• opacity 不是1；
• 还有perspective。

还有其他应用堆叠上下文的属性吗？

Answer 1

以下一种或多种情况会导致元素为其后代建立自己的堆叠上下文¹：

• 根元素始终拥有一个根堆叠上下文。这就是为什么您无需先定位根元素即可开始排列元素的原因。任何尚未参与本地堆叠上下文（由以下任何其他场景生成）的元素将改为参与根堆叠上下文。

• 在定位的元素上将z-index 设置为除auto 以外的任何内容（即具有position 的元素不是static）。

  • 请注意，对于带有position: fixed 的元素，此行为将被更改，这样它们将始终建立堆叠上下文，而不管它们的z-index 值如何。一些浏览器已经开始采用这种行为，但是这种变化还没有反映在 CSS2.1 或新的CSS Positioned Layout Module 中，所以现在依赖这种行为可能不明智。

    在another answer of mine 中探讨了这种行为变化，而这又链接到this article 和this set of CSSWG telecon minutes。

  • 另一个例外是flex item 和grid item。设置z-index 总是会导致它建立一个堆叠上下文，即使它没有定位。

• 将opacity 设置为小于1 的任何值。

• Transforming元素：

  • 将transform 设置为none 以外的任何值。

  • 将transform-style 设置为preserve-3d。

  • 将perspective 设置为none 以外的任何值。

• 创建CSS region：在content 不是normal 的元素上将flow-from 设置为none 以外的任何值。

• 在paged media 中，每个page-margin box 建立自己的堆栈上下文。

• 在filter effects 中，将filter 设置为none 以外的任何值。

• 在compositing and blending 中，将isolation 设置为isolate 并将mix-blend-mode 设置为不同于normal 的值

• 在will change 中，将will-change 设置为任何非初始值都会创建堆栈上下文的属性。

• 在masking 中，将clip-path/mask 设置为none 以外的值。

请注意，block formatting context 与堆栈上下文不同；事实上，它们是两个完全独立（尽管不相互排斥）的概念。

---

¹_{这不包括 pseudo-stacking contexts，这是一个非正式的术语，在定位方面仅指 things that behave like independent stacking contexts，但实际上参与了它们的父堆叠上下文。}