哪些CSS属性可以创建层叠上下文？

Question

我正在学习有关层叠上下文，并使用创建层叠上下文的属性进行一些测试。

我进行了几次测试，并发现除了z-index之外，当以下属性具有以下特定值时也会创建一个层叠上下文：

• transform 值不为 none；
• opacity 值不为 1；
• 还有 perspective 属性。

是否还有其他属性会创建层叠上下文？

- jotavejv

---

position: fixed 可以在 Chrom(e|ium) 上创建一个堆叠上下文！在 chrome://flags 中有一个专门的标志。 - Ry-

@minitech 是的，z-index 需要一个非静态的位置来创建堆叠上下文。我相信 OP 已经意识到了这一点。或者你是指 position:fixed 单独创建堆叠上下文而不需要 z-index 吗？ - Fabrício Matté

@FabrícioMatté：是的，该标志表示所有固定位置元素都创建了一个堆叠上下文。我不知道这是否是一个错误修复。 - Ry-

@minitech 哦，有趣。=] 我会去看看的。 - Fabrício Matté

@minitech 我不知道固定位置的 Chrome 标志，谢谢。 - jotavejv

一些属性除了创建堆叠上下文外，还会为绝对定位和固定定位元素创建包含块。 - Temani Afif

Answer 1

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

• 根元素始终具有根堆叠上下文。这就是为什么您可以开始排列元素而不必先定位根元素的原因。任何不参与本地堆叠上下文（由以下任何一种情况生成）的元素都将参与根堆叠上下文。

• 在已定位的元素（即具有非静态position属性的元素）上将z-index设置为除auto以外的任何值。

  • 请注意，此行为预计将更改为对具有position: fixed的元素进行堆叠，以便它们始终建立堆叠上下文，无论其z-index值如何。一些浏览器已经开始采用此行为，但是CSS2.1或新的CSS Positioned Layout Module尚未反映出此更改，因此现在可能不明智地依赖于此行为。

    我在另一个答案中探讨了这种行为变化，该答案转而链接到本文和这组CSSWG电话会议记录。

  • 另一个例外是使用flex项目和网格项目。设置z-index将始终导致其建立堆叠上下文，即使它未定位。

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

• 转换元素：

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

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

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

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

• 在分页媒体中，每个页边距框都会建立自己的堆叠上下文。

• 在滤镜效果中，将filter设置为除none以外的任何值。

• 在合成和混合中，将isolation设置为isolate，并将mix-blend-mode设置为与normal不同的值

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

• 在遮罩中，使用除none以外的值设置clip-path/mask。

请注意，块级格式化上下文不同于堆叠上下文；实际上，它们是两个完全独立的（虽然不是互斥的）概念。

---

¹ _{这不包括伪层叠上下文，这是一个非正式的术语，仅指行为类似于独立堆叠上下文相对于定位，但实际上参与其父堆叠上下文。}

- BoltClock

---

“sticky”这个定位属性会自动创建一个层叠上下文吗？ - denis

@and-dev：是的，根据给定的规则，因为它是一个除了“static”之外的值。它是否仅适用于除“auto”之外的“z-index”还是适用于所有值尚不清楚-这将取决于最终实现方式。 - BoltClock

@and-dev：哦，我的回答有误。应该是auto，而不是1。 - BoltClock

@Hashem Qolami：看起来不错，谢谢。不需要在评论中通知我，因为我会收到编辑的通知 :) - BoltClock

-webkit-overflow-scrolling: touch还会创建一个新的堆叠上下文。 - Artem Andreev