什么是层叠上下文 (Stacking Context)？它是如何形成的？

推荐答案

层叠上下文 (Stacking Context) 是 HTML 元素的一个三维概念，它决定了元素在 z 轴上的排列顺序，即哪些元素会覆盖在其他元素之上。可以认为它定义了一个独立的渲染空间，在这个空间内的元素按照特定的规则进行层叠。

形成层叠上下文的方式有：

1. 根元素 (<html>)：这是默认的层叠上下文。
2. position 值不是 static 的元素（relative, absolute, fixed, sticky）且 z-index 值不是 auto 的元素。
3. flex 容器 (display: flex 或 display: inline-flex)，且 z-index 值不是 auto 的元素。
4. grid 容器 (display: grid 或 display: inline-grid)，且 z-index 值不是 auto 的元素。
5. opacity 值小于 1 的元素。
6. transform 值不是 none 的元素。
7. filter 值不是 none 的元素。
8. backdrop-filter 值不是 none 的元素。
9. mix-blend-mode 值不是 normal 的元素。
10. isolation 值是 isolate 的元素。
11. will-change 指定了任意 CSS 属性（即使该属性实际上不会被改变）。
12. contain 值为 layout, paint 或者 composite 的元素。
13. column-count 或 column-width 值不是 auto 的元素。
14. mask 或 mask-* 值不是 none 的元素。
15. perspective 值不是 none 的元素。

本题详细解读

层叠上下文的概念

在 CSS 中，元素默认的排列方式是按照 HTML 代码的顺序从上到下进行渲染，这在二维平面上很好理解。但是当元素之间需要有重叠时，就涉及到 z 轴的概念，即元素在屏幕上的深度。层叠上下文就是用来管理这种深度，并决定哪些元素会出现在其他元素之上。

可以将层叠上下文想象成一个“栈”，每个新的层叠上下文都像一个独立的栈，它里面的元素按照特定的层叠规则进行排序。父层叠上下文不会影响子层叠上下文中的元素排序，反之亦然。

层叠上下文的形成条件

以下是形成新的层叠上下文的详细解释：

1. 根元素 (<html>): 整个 HTML 文档的根元素默认就形成了一个层叠上下文。这是所有层叠上下文的起始点。

2. position 值不是 static 且 z-index 值不是 auto 的元素:

   • 当元素设置了 position: relative, position: absolute, position: fixed, 或者 position: sticky 中的任何一个，并且同时设置了 z-index 属性且值不为 auto，那么该元素会创建一个新的层叠上下文。
   • z-index 的值会影响该元素在其层叠上下文中的层叠顺序，值越大，元素越靠前。
   • 如果 z-index 值为 0，依然会创建新的层叠上下文。

3. flex 容器 (display: flex 或 display: inline-flex) 且 z-index 值不是 auto 的元素:

   • 当一个元素设置为 display: flex 或 display: inline-flex，并且该元素同时设置了 z-index 属性且值不为 auto，那么该元素会创建一个新的层叠上下文。
   • 这使得 flex 容器内的子元素在层叠方面更加可控。

4. grid 容器 (display: grid 或 display: inline-grid) 且 z-index 值不是 auto 的元素:

   • 与 flex 容器类似，当一个元素设置为 display: grid 或 display: inline-grid，并且该元素同时设置了 z-index 属性且值不为 auto，那么该元素会创建一个新的层叠上下文。

5. opacity 值小于 1 的元素:

   • 任何 opacity 值小于 1 的元素（例如 opacity: 0.5），都会创建一个新的层叠上下文。

6. transform 值不是 none 的元素:

   • 如果元素的 transform 属性被设置为 translate(), rotate(), scale() 等任何非 none 的值，也会创建新的层叠上下文。

7. filter 值不是 none 的元素:

   • 当元素应用任何 filter 属性，例如 blur(), grayscale(), 且值不是none时，会创建一个新的层叠上下文。

8. backdrop-filter 值不是 none 的元素:

   • 当元素应用 backdrop-filter 属性且值不是 none 时, 会创建一个新的层叠上下文。

9. mix-blend-mode 值不是 normal 的元素:

   • 当元素的 mix-blend-mode 值不是 normal 时，如 multiply, screen 等，会创建一个新的层叠上下文。

10. isolation 值是 isolate 的元素:

    • 当元素的 isolation 属性设置为 isolate 时，也会创建一个新的层叠上下文。 这通常用于防止混合模式影响到其他元素。

11. will-change 指定了任意 CSS 属性（即使该属性实际上不会被改变）:

    • 当元素的 will-change 属性指定了任何属性时，即使该属性实际上没有变化，该元素会创建一个新的层叠上下文。此属性通常用于性能优化。

12. contain 值为 layout, paint 或者 composite 的元素:

    • 如果元素的 contain 属性的值为 layout、paint 或 composite 中的任何一个，该元素会创建一个新的层叠上下文，用于隔离元素的渲染。

13. column-count 或 column-width 值不是 auto 的元素:

    • 当元素使用了多列布局，且 column-count 或 column-width 属性的值不是 auto 时，会创建一个新的层叠上下文。

14. mask 或 mask-* 值不是 none 的元素:

• 当元素使用任何 mask 或者 mask-* 属性，并且值不是 none 时，会创建一个新的层叠上下文。

1. perspective 值不是 none 的元素:
   • 当元素的 perspective 属性值不是 none 时，会创建一个新的层叠上下文，用于3D转换。

理解层叠上下文对于掌握 CSS 布局至关重要，特别是在处理复杂的用户界面和动画时。通过正确控制层叠上下文，可以精确地管理元素的层叠顺序，避免出现元素被遮挡或者无法按照预期渲染的问题。