深入理解 CSS 层叠上下文

在现代网页设计中，CSS 层叠上下文是一个关键概念，尤其当我们涉及到复杂布局、弹出层、模态框、动画等场景时。通过层叠上下文，我们能够控制元素的层级关系，从而确保页面的渲染顺序符合预期。在这篇博客中，我们将深入探讨 CSS 的层叠上下文，帮助你更好地理解其工作原理和应用。

什么是层叠上下文？

层叠上下文（Stacking Context）是一个三维的概念，它描述了网页元素的“堆叠”方式。当元素具有特定的属性时，它们会被认为是一个独立的层叠上下文。层叠上下文不仅决定元素的绘制顺序，还影响元素的叠加顺序。

想象一下，你在浏览器中查看一个页面，页面中的每个 HTML 元素都可以在一个虚拟的 z 轴上进行堆叠。这个堆叠的顺序由 CSS 属性决定，尤其是 z-index 属性。当我们为某些元素指定了 z-index 的值，或使用其他特定的 CSS 属性时，就创建了一个层叠上下文。

如何创建层叠上下文？

在 HTML 文档中，某些元素满足特定条件时，就会创建一个新的层叠上下文。根据 CSS 规范，创建层叠上下文的元素包括：

文档根元素 (<html>)
文档的根元素本身就是一个默认的层叠上下文。
具有 position 值为 absolute 或 relative，且 z-index 值不为 auto 的元素
当元素设置为绝对定位或相对定位，并且 z-index 不为 auto，它将创建一个新的层叠上下文。
具有 position 值为 fixed 或 sticky 的元素
固定定位或粘滞定位的元素也会创建层叠上下文。需要注意的是，粘滞定位在一些旧版浏览器中可能不被支持。
flex 容器的子元素，且 z-index 值不为 auto
如果一个元素是 flex 容器的子元素，并且其 z-index 不为 auto，则该元素也会形成一个新的层叠上下文。
grid 容器的子元素，且 z-index 值不为 auto
与 flex 容器类似，grid 容器中的子元素如果 z-index 值不为 auto，也会创建层叠上下文。
opacity 属性值小于 1 的元素
如果一个元素的 opacity 属性值小于 1（即不完全透明），它也会创建一个新的层叠上下文。
mix-blend-mode 属性值不为 normal 的元素
如果元素的 mix-blend-mode 属性设置为非 normal 值，则该元素会创建一个新的层叠上下文。
以下属性值不为 none 的元素：
- transform
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
- isolation 属性值为 isolate
will-change 值设定了任一属性并且该属性的值为非初始值时
使用 will-change 可以提前告知浏览器即将发生的变化，从而为该元素创建一个新的层叠上下文。
contain 属性值为 layout、paint 或 contain: strict、contain: content 的元素
该属性限制了元素的绘制和布局行为，通常也会创建一个新的层叠上下文。

层叠上下文的工作原理

当一个元素形成层叠上下文时，它会成为其父层叠上下文的一个子上下文。层叠上下文的关键特性在于，每个上下文都是独立的。即使两个元素的 z-index 值相同，它们的层级关系依然由其所在的层叠上下文来决定。

层叠上下文的嵌套
层叠上下文可以嵌套在其他层叠上下文中。当元素属于一个层叠上下文时，它的层级关系只在该上下文内部有效，而不会影响到父上下文或其他兄弟元素。
子元素层叠的独立性
每个层叠上下文内部的元素都会根据它们的 z-index 值进行层叠。无论是父元素还是子元素，它们的叠放顺序只会在各自的上下文内生效。
层叠上下文的影响
一个层叠上下文一旦创建，其子元素的渲染顺序将会被限制在该上下文内部。即使子元素的 z-index 值较高，父元素的 z-index 也会影响整个上下文的显示顺序。

实际应用中的例子

层叠上下文在实际开发中有很多应用，尤其是在涉及到 z-index 的层级控制时。以下是一些常见的应用场景：

模态框
使用 position: fixed 和 z-index 来确保模态框显示在页面的顶部。由于模态框创建了自己的层叠上下文，它能够在父元素或其他兄弟元素之上显示。
弹出层
类似模态框的技术，通过设置合适的 z-index 和 position 属性，确保弹出层不会被其他元素遮挡。
透明度与混合模式
使用 opacity 或 mix-blend-mode 等属性时，元素将形成新的层叠上下文，从而影响它与其他元素的叠加顺序。