一个困扰前端开发者二十年的问题

你一定遇到过这样的场景：给一个弹窗设置了z-index: 9999，结果它依然被某个只有z-index: 1的元素遮挡。你开始怀疑人生，把值改成99999、999999，甚至2147483647（JavaScript整数的最大安全值），问题依然存在。

这不是CSS的bug，而是你对层叠上下文（Stacking Context）的理解存在盲区。

CSS规范中，层叠上下文被定义为"HTML元素沿z轴的三维概念化"。听起来很抽象，但它的本质是一个渲染隔离机制：一旦某个元素创建了层叠上下文，它的所有后代元素就会形成一个独立的"层叠世界"，与外界的元素互不干扰。

从一个"灵异事件"说起

看这段代码：

<style>
  header {
    position: relative;
    z-index: 2;
  }
  main {
    position: relative;
    z-index: 1;
  }
  .tooltip {
    position: absolute;
    z-index: 999999;
  }
</style>

<header>导航栏</header>
<main>
  <div class="tooltip">我是提示框</div>
  <p>内容区域</p>
</main>

tooltip的z-index高达999999，按理说应该盖住一切。但实际渲染结果，它却被header遮挡。为什么？

因为z-index只在同一个层叠上下文内生效。

当main元素设置了position: relative和z-index: 1时，它创建了一个新的层叠上下文。tooltip虽然z-index值巨大，但它的"竞争对手"已经变成main内部的兄弟元素，而非外部的header。

header和main才是同一层级的较量对象，而main输了（z-index: 1 < z-index: 2）。整个main及其所有后代元素，作为一个整体，都被压到了header下方。

W3C规范：七层层叠顺序

要真正理解层叠上下文，必须回到源头——W3C CSS2.1规范附录E。这份文档定义了浏览器渲染元素的"绘顺序"，共分为七个层次，从底到顶依次是：

层级 内容 说明
1 背景和边框 层叠上下文元素的background和border
2 负z-index z-index为负值的定位元素
3 块级元素 正常文档流中的block-level元素
4 浮动元素 非定位的浮动元素及其内容
5 内联元素 正常文档流中的inline/inline-block元素
6 z-index: 0/auto z-index为0或auto的定位元素
7 正z-index z-index为正值的定位元素

这个顺序揭示了一个反直觉的事实：负z-index的元素仍然在背景之上，而不是穿透到层叠上下文元素的背后。

图片来源: W3C CSS2.1 Specification - Appendix E

为什么内联元素比浮动元素层级更高？

张鑫旭在他的经典文章中给出了精彩的解释：网页中最重要的永远是内容。background和border通常是装饰，浮动和块级元素用于布局，而内联元素承载的是真正的文字和图片内容。

因此，当浮动图片与文字重叠时，文字会自动显示在图片上方——这是设计者有意为之的"内容优先"原则。

创建层叠上下文的所有途径

哪些CSS属性会创建层叠上下文？这是一个开发者最容易踩坑的地方。MDN文档列出了完整的清单：

传统方式（CSS2.1时代）

  1. 根元素<html>：天生就是层叠上下文
  2. 定位元素 + 非auto的z-index：position: relative/absolute且z-index不是auto

CSS3新增方式

这里藏着大量"隐形陷阱"：

属性 触发条件 常见踩坑场景
opacity 值小于1 淡入淡出动画导致层级突变
transform 值不是none GPU加速动画意外创建上下文
filter 值不是none 模糊、灰度等滤镜效果
mix-blend-mode 值不是normal 混合模式设计
isolation 值是isolate 唯一"纯创建上下文"的属性
will-change 指定上述任一属性 性能优化提示变成"副作用"
contain 值含layout或paint 性能隔离属性
position: fixed/sticky 无需z-index Chrome 22后的行为变更
Flex/Grid子项 z-index非auto 子元素本身创建上下文

浏览器差异的"历史包袱"

2012年之前，position: fixed的行为在不同浏览器中存在分歧。Chrome官方博客在"Stacking changes coming to position:fixed elements"一文中宣布：从Chrome 22开始，所有position: fixed元素都会创建层叠上下文，以与移动端浏览器保持一致。

这个改动导致大量依赖"fixed元素内部内容与外部内容交错显示"的布局瞬间崩溃。修复方法是：将需要交错的内容拆分成多个独立的fixed元素。

图片来源: Chrome Developers Blog

一个实际的" fadeIn陷阱"

看这个真实案例：

<style>
  .overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
  }
  .content {
    position: relative;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .animated {
    animation: fadeIn 0.5s;
  }
</style>

<div class="overlay">遮罩层</div>
<img class="content animated" src="photo.jpg">

动画播放时，图片跑到遮罩层后面；动画结束后，图片又回到了遮罩层上面。

原因：opacity值不为1时会创建层叠上下文。动画过程中，图片元素变成了层叠上下文元素，层叠顺序变为"z-index: auto"级别（与没有z-index的absolute元素平级）。根据"后来居上"准则，DOM顺序在前的遮罩层覆盖了图片。

解决方法：

  1. 给图片设置z-index: 1
  2. 或者调整DOM顺序

isolation：最优雅的解决方案

2016年，Josh Comeau在他的文章"What The Heck, z-index??“中强烈推荐了isolation: isolate这个属性。它的唯一作用就是创建层叠上下文，不带来任何副作用：

.component-wrapper {
  isolation: isolate;
}

为什么它比传统方法更优雅？

/* 传统方法：需要指定一个可能不合适的z-index值 */
.wrapper {
  position: relative;
  z-index: 0; /* 这个0在所有场景下都合适吗？ */
}

/* isolation方法：不关心具体值，只在乎"隔离" */
.wrapper {
  isolation: isolate;
}

对于可复用的组件库，isolation让组件保持"无立场”——它不需要知道自己在页面中的具体z-index层级，只需要确保内部元素的层叠关系不会"溢出"影响外部。

浏览器渲染管道中的层叠上下文

层叠上下文不仅仅是CSS的概念，它直接影响浏览器的渲染管道。

渲染管道的六个阶段

浏览器将代码转换为像素的过程：

  1. 解析：HTML → DOM，CSS → CSSOM
  2. 样式计算：级联、继承、变量解析
  3. 布局（Layout）：计算元素几何信息
  4. 绘制（Paint）：生成绘图命令列表（Display List）
  5. 合成（Composite）：层合并、GPU加速
  6. 显示：缓冲区交换、VSync同步

在Paint阶段，浏览器按照CSS层叠顺序生成绘图命令。层叠上下文决定了这些命令的分组方式：同一个上下文内的元素，其绘图命令连续排列，作为一个整体参与更上层的排序。

GPU层合成与层叠上下文

Chrome使用Skia图形库进行渲染。当元素满足特定条件时，会被"提升"为独立的合成层（Compositing Layer）：

  • 强候选：3D transform、opacity动画、will-change
  • 弱候选：filter、mask、position: fixed

每个合成层对应一个GPU纹理。层叠上下文元素天然适合成为合成层——因为它本身就是一个"隔离的渲染单元"。

但这也带来了性能代价：

  • 更多GPU显存占用
  • CPU到GPU的数据传输开销
  • 层叠加时的过度绘制（Overdraw）

所以，不要滥用层叠上下文。每个创建层叠上下文的CSS属性，都可能触发GPU层的创建。

调试层叠上下文问题的工具

Chrome/Edge 3D视图

  1. 打开DevTools（F12）
  2. 按Ctrl+Shift+P打开命令面板
  3. 输入"Show 3D View"
  4. 切换到"Z-index"标签

这个工具会以3D形式展示页面的层叠上下文树，直观地看到哪些元素创建了独立上下文。

图片来源: Microsoft Edge DevTools Documentation

Chrome Layers面板

在DevTools的"More tools"中找到"Layers"，可以：

  • 查看所有合成层
  • 检查每个层的尺寸和内存占用
  • 分析层的创建原因

浏览器扩展

Andrea Dragotta开发的z-index DevTools扩展会在Elements面板中新增一个"Stacking Context"标签，显示当前元素的层叠上下文信息。

大型项目的z-index管理策略

Smashing Magazine的工程师Steven Frieson分享了一个在实践中验证过的解决方案。

问题：魔法数字泛滥

.modal { z-index: 9999; }
.tooltip { z-index: 99999; }
.notification { z-index: 999999; }

这种"军备竞赛"式的做法有三个问题：

  1. 不知道这些数字的含义
  2. 不确定新元素应该用什么值
  3. 修改一个值可能引发连锁bug

解决方案：语义化+相对定义

// 工具常量
const base = 0;
const above = 1;
const below = -1;

// 页面布局层级
export const zLayoutNavigation = above + base;
export const zLayoutFooter = above + base;
export const zLayoutModal = above + zLayoutNavigation;
export const zLayoutPopUpAd = above + zLayoutModal;

// 导航菜单内部
export const zNavMenuBackdrop = below + base;
export const zNavMenuPopover = above + base;
export const zNavMenuToggle = above + zNavMenuPopover;

这种写法的优点：

  1. 读起来像句子：“Modal is above Navigation”
  2. 修改安全：交换两行代码就能改变层叠顺序
  3. 无魔法数字：最高值可能只是5，但没人需要知道

BEM式的命名约定

格式：z<Context><Element>

// z + 层叠上下文名 + 元素名
export const zModalBackdrop = below + base;
export const zModalContent = above + zModalBackdrop;
export const zModalCloseButton = above + zModalContent;

这种命名明确表达了元素所属的层叠上下文，防止跨上下文的误用。

层叠上下文的自成体系特性

理解层叠上下文，关键在于把握"自成体系"（Self-contained）这个概念。

当一个元素创建层叠上下文后：

  1. 所有后代元素作为一个整体参与父上下文的层叠
  2. 内部的z-index值对外部完全不可见
  3. 内部的层叠问题与外部无关

这可以用"版本号"类比：父元素的z-index是主版本号，子元素的z-index是次版本号。比较时先比主版本号，主版本号相同再比次版本号。

  • 元素A：主版本5，次版本0 → 5.0
  • 元素B：主版本4，次版本6 → 4.6

虽然6 > 0，但5 > 4，所以A显示在B上方。

常见陷阱速查

陷阱1：opacity动画改变层叠

/* 动画播放时创建层叠上下文，结束后销毁 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

解决：给动画元素设置明确的z-index

陷阱2：transform意外创建上下文

/* 只是想做个居中，却意外创建了层叠上下文 */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

解决：如果不需要GPU加速，考虑用margin负值替代

陷阱3：will-change的副作用

/* 性能优化提示，却带来了意外的层叠上下文 */
.optimized {
  will-change: opacity;
}

解决：只对需要动画的元素使用will-change，动画结束后移除

陷阱4：Flex/Grid子项的z-index

.container {
  display: flex;
}
.item {
  z-index: 1; /* item本身创建了层叠上下文，不是container */
}

这与传统定位元素的规则不同，flex/grid子项设置z-index就会创建层叠上下文，无需position。

总结：三层认知框架

理解层叠上下文，需要建立三层认知：

第一层：现象认知

  • z-index只在同一层叠上下文内比较
  • 设置了很大的z-index却依然被遮挡

第二层：机制认知

  • 哪些属性创建层叠上下文
  • 七层层叠顺序的具体规则
  • “自成体系"和"原子化"的含义

第三层：工程认知

  • 使用isolation隔离组件
  • 语义化命名z-index值
  • 利用浏览器工具诊断问题

CSS没有警告和错误提示，当层叠出现意外时，没有一个清晰的"下一步"告诉你问题在哪。理解层叠上下文，就是掌握这个隐形机制的运作规律——它从CSS2.1时代延续至今，是浏览器渲染模型中不可或缺的一环。

参考资料

  1. W3C CSS2.1 Specification - Appendix E: Elaborate description of Stacking Contexts
  2. MDN Web Docs - Stacking Context
  3. Josh Comeau - What The Heck, z-index??
  4. 张鑫旭 - 深入理解CSS中的层叠上下文和层叠顺序
  5. Chrome Developers Blog - Stacking changes coming to position:fixed elements
  6. Smashing Magazine - Managing CSS Z-Index In Large Projects
  7. Aleksandar Gjoreski - Inside the Browser Rendering Pipeline
  8. CSS-Tricks - The CSS contain property
  9. freeCodeCamp - How to Create a New Stacking Context with the Isolation Property