CSS Z-index 层级

CSS z-index 层叠层级详解 · 难度：进阶 · +15XP

CSS z-index 层叠层级详解

z-index 控制定位元素（position 不为 static）在 Z 轴上的堆叠顺序。值越大，元素越靠近用户（上层）。理解 z-index 还需要掌握层叠上下文（Stacking Context）的概念。

基本用法

z-index 只对定位元素（position: relative/absolute/fixed/sticky）和 flex/grid 子元素生效。

/* 前提：元素必须有非 static 的 position */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;  /* 覆盖在所有内容上方 */
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;  /* 比遮罩层更高 */
  background: white;
}
.header {
  position: sticky;
  top: 0;
  z-index: 100;  /* 确保导航栏在最上层 */
}

层叠上下文（Stacking Context）

某些 CSS 属性会创建新的层叠上下文，在其中的 z-index 值只在该上下文中比较。常见创建层叠上下文的属性：

层叠上下文陷阱

/* 陷阱案例 */
.parent {
  position: relative;
  z-index: 1;
  opacity: 0.9;  /* 创建了层叠上下文 */
}

.child {
  position: absolute;
  z-index: 9999;  /* 无论多大，都被限制在父级的层叠上下文中 */
}
/* 解决方案：保持层级结构简单 */

常见层级规范（推荐）

/* 建议用 CSS 变量统一管理层级 */
:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;
  --z-tooltip: 2000;
}

.dropdown { z-index: var(--z-dropdown); }
.sticky-header { z-index: var(--z-sticky); }
.overlay { z-index: var(--z-overlay); }
.modal { z-index: var(--z-modal); }
.toast { z-index: var(--z-toast); }
.tooltip { z-index: var(--z-tooltip); }

auto vs 数字

/* z-index: auto —— 不创建新的层叠上下文 */
.parent-auto {
  position: relative;
  z-index: auto;
}

/* z-index: 0 —— 创建新的层叠上下文 */
.parent-zero {
  position: relative;
  z-index: 0;
}
/* 两者层叠级别相同，但 auto 不创建上下文 */

z-index 速查表

???? 练习

1. 创建一个固定导航栏（z-index: 100），确保它在滚动时覆盖内容
2. 制作一个模态弹窗（遮罩 + 弹窗），用 z-index 确保层级正确
3. 使用 CSS 变量定义并管理项目中的 z-index 层级体系
4. 实验：在父元素中设置 opacity: 0.9，观察子元素 z-index 是否被限制
5. 使用浏览器 DevTools 查看元素的层叠上下文和 z-index 值