1. 为什么你的按钮总被其他元素盖住？

想象你在玩一叠扑克牌，最上面的牌会挡住下面的。网页中的元素也是如此，默认按照代码书写顺序排列，后写的元素覆盖先写的。但在实际项目中，全局导航栏、悬浮按钮、弹窗等组件需要人为控制层级，此时 z-index 便成了我们手中的“扑克牌堆叠策略”。

<!-- 技术栈：HTML/CSS -->
<div class="modal">我是弹窗</div>
<div class="dropdown">我是下拉菜单</div>

<style>
.modal {
  position: fixed;
  z-index: 1000; /* 弹窗需要最高优先级 */
}
.dropdown {
  position: absolute;
  z-index: 500; /* 下拉菜单次之 */
}
</style>

这里弹窗的 z-index 值更高，会始终覆盖下拉菜单。但若遇到多个弹窗或者异步加载的组件，问题就复杂了。

2. 层叠上下文的隐藏规则

2.1 层叠顺序的默认法则

元素层级由低到高的默认顺序为：

  1. 背景和边框
  2. 负值 z-index 元素
  3. 块级盒子
  4. 浮动元素
  5. 内联元素
  6. z-index: 0/auto 的定位元素
  7. 正值 z-index 元素

2.2 层叠上下文的触发条件

以下属性会创建新的层叠上下文，形成独立的层级小世界：

  • position: relative/absolute/fixed 且 z-index 不为 auto
  • opacity < 1
  • transform 不为 none
  • filter 不为 none
<!-- 技术栈：HTML/CSS -->
<div class="parent">
  <div class="child-1"></div>
</div>
<div class="parent-2">
  <div class="child-2"></div>
</div>

<style>
.parent {
  position: relative;
  z-index: 1; /* 创建层叠上下文 */
}
.child-1 {
  z-index: 9999; /* 只在父级层叠上下文中生效 */
}
.parent-2 {
  transform: translateX(0); /* 创建新层叠上下文 */
}
.child-2 {
  z-index: 1; /* 与 parent 的子元素不在同一层级体系 */
}
</style>

此时 child-1 的 z-index 无法突破父级层叠上下文，而 child-2 则因为父级使用 transform 进入了新层级体系。

3. 实战中的三大经典场景

3.1 弹窗全局覆盖问题

场景：页面有头部导航栏（z-index: 100），弹窗出现时需盖住导航栏。
错误实现：直接给弹窗设置 z-index: 200，但当导航栏父级存在层叠上下文时可能失效。

<!-- 技术栈：HTML/CSS -->
<header>
  <div class="nav-bar"></div>
</header>
<div class="modal"></div>

<style>
header {
  position: fixed;
  z-index: 100; /* 父级层叠上下文 */
}
.nav-bar {
  z-index: 500; /* 实际层级仍在父级内部 */
}
.modal {
  position: fixed;
  z-index: 200; /* 仍然被父级的 z-index 限制 */
}
</style>

正确方案：将弹窗放在 <body> 的直接子级，或提升其父级的 z-index 层级。

3.2 动态加载组件的层级战争

场景：多个通知消息依次弹出，后出现的通知需要盖住前一个。

<!-- 技术栈：HTML/CSS -->
<div class="notifications">
  <div class="notice">第一条通知</div>
  <div class="notice">第二条通知</div>
</div>

<style>
.notifications {
  position: fixed;
  right: 20px;
  top: 20px;
}
.notice {
  position: relative;
  z-index: 100; /* 动态追加时只会叠加，无法覆盖 */
}
</style>

<!-- 改进方案：使用 JavaScript 动态提升层级 -->
<script>
document.querySelectorAll('.notice').forEach((el, index) => {
  el.style.zIndex = 100 + index; 
});
</script>

通过程序动态计算 z-index 值，确保新元素总在上层。

3.3 复合组件中的层级内斗

场景：卡片悬浮时显示操作按钮，但多个卡片的按钮相互重叠。

<!-- 技术栈：HTML/CSS -->
<div class="card">
  <div class="content"></div>
  <div class="actions"></div>
</div>

<style>
.card {
  position: relative;
}
.actions {
  position: absolute;
  z-index: 1; /* 仅在本卡片内有效 */
  display: none;
}
.card:hover .actions {
  display: block;
}
</style>

<!-- 问题复现：两个卡片相邻时，悬浮层级混乱 -->
<!-- 解决方案：悬停时提升父级层级 -->
<style>
.card:hover {
  z-index: 1; /* 父级形成层叠上下文 */
}
</style>

通过控制父级层级，确保同一时间仅有一个卡片按钮显示在最上层。

4. 关联技术的影响不容忽视

4.1 transform 的副作用

<!-- 技术栈：HTML/CSS -->
<div class="box-1"></div>
<div class="box-2"></div>

<style>
.box-1 {
  position: relative;
  z-index: 100;
}
.box-2 {
  transform: translateY(20px); /* 创建新层叠上下文 */
  z-index: 50; /* 实际层级可能高于 box-1 */
}
</style>

此时因 transform 的存在，box-2 的层级体系独立于 box-1，需特别注意。

4.2 opacity 的隐秘特性

<!-- 技术栈：HTML/CSS -->
<div class="group">
  <div class="alpha-layer"></div>
</div>

<style>
.group {
  opacity: 0.99; /* 创建层叠上下文 */
}
.alpha-layer {
  z-index: 200; /* 实际作用域被限定在 group 内部 */
}
</style>

opacity < 1 会隐式创建层叠上下文，容易导致开发者误判层级关系。

5. z-index 的技术棱镜

优势

  • 即时生效：修改属性即可实时调整层级
  • 精确控制：通过数值差异明确优先级
  • 跨组件协调：全局层级规划统一视觉优先级

劣势

  • 维护黑洞：大型项目中容易失控形成“z-index: 9999 战争”
  • 作用域陷阱：受父层级叠上下文限制
  • 隐式依赖：与其他属性（如 transform）的联动可能产生意外结果

6. 安全使用指南

  1. 层级设计表先行：项目中预先定义好各类型组件的层级区间（如导航层 1000-1999，弹窗层 2000-2999）
  2. 使用 CSS 变量管理：
:root {
  --z-modal: 2000;
  --z-nav: 1000;
  --z-tooltip: 3000;
}
  1. 避免嵌套层叠上下文：非必要不在子组件中使用 position + z-index
  2. 工具函数辅助调试：通过浏览器控制台可视化层级
// 在控制台打印所有层叠上下文元素
console.log([...document.querySelectorAll('*')]
  .filter(el => el.style.zIndex !== 'auto'));

7. 总结：层级管理的道与术

  • 理解本质：层叠上下文是 z-index 的作用域单位
  • 克制使用：只在必须时使用定位和 z-index
  • 全局视角：通过设计系统和文档维护层级规范
  • 技术组合：善用 position、transform 等属性避免过度依赖 z-index