Published on

什么是层叠上下文

Authors
  • avatar
    Name
    Ryan
    Twitter
Table of Contents
stack-context
stack-context

1. 什么是层叠上下文？

层叠上下文是浏览器绘制页面时构建的一个三维环境，元素根据 z-index、定位方式、层级规则决定谁在上、谁在下。根元素（<html>）天然是一个层叠上下文，特定条件下的元素也会创建新的层叠上下文，例如：

  • position 为 absolute 或 relative 且设置了 z-index
  • 使用了 opacity < 1、transform、filter、will-change 等属性
  • mix-blend-mode 被设置时

一个新的层叠上下文将阻止其内部的子元素参与外层的 z-index 层级排序。

2. 渲染层与合成层

浏览器渲染页面主要分为：

  1. 布局（Layout）

  2. 绘制（Painting）

  3. 合成（Compositing）

合成阶段会将页面分成多个合成层（compositing layers），并在 GPU 中进行独立渲染。这些合成层来源于层叠上下文，但并不一一对应。

默认情况下，多个层叠上下文会共用一个渲染层（也称合成层），即根层。这是浏览器的一种性能优化策略，层压缩（Layer Squashing）：尽可能少创建合成层，避免性能浪费。

3. 什么时候会强制创建新合成层？

当元素设置了某些会触发 GPU 加速的属性（如 transform、will-change、video 元素、Canvas）时，浏览器会将其提升到独立的合成层，以避免频繁重绘主层。

值得注意的是：如果底层的某个盒子元素被强制提升为合成层（如设置 will-change: transform），那么其上方所有需要与之叠加的元素也会被提升，并最终被合并到同一个新合成层中。

换句话说，合成层不是无限叠加的，浏览器会在保证视觉正确的前提下合并层级，避免层爆炸。

4. 实践建议

  • 尽量避免滥用 will-change 或 transform 提升合成层，否则可能适得其反，引起多个元素层级被打包进同一层，导致内存占用上升。

  • 使用浏览器开发者工具（如 Chrome 的 Layers 面板）查看渲染层结构，有助于调试和优化性能。

5. 测试代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        position: absolute;
      }
      .box1 {
        background-color: red;
        left: 100px;
        top: 100px;

        /* 单独提升至合成层 */
        /* transform: translateZ(0); */
      }
      .box2 {
        background-color: blue;
        left: 150px;
        top: 150px;
      }
      .box3 {
        background-color: yellow;
        left: 200px;
        top: 200px;
      }
      .box4 {
        background-color: green;
        left: 250px;
        top: 250px;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
  </body>
</html>

参考文章

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

CSS 中重要的层叠概念

浏览器层合成与页面渲染优化

MDN：层叠上下文

View on GitHub