CSS Z-Index 解析：停止堆叠混乱，像专业人士一样管理层
Source: Dev.to
如果你曾经尝试把下拉菜单放在页眉之上，或与顽固地出现在所有内容后面的模态框斗争过，你一定已经遇到了 CSS z-index 的混乱世界。看起来很简单——只要选一个更大的数就能在最上层，对吧？——但它往往会在不经意间让人抓狂地失效。本文将拆解 z-index 的真实含义、它为何会如此表现，并分享专业的策略，让你在即使是大型项目中也能自信地管理层级。
什么是 Z‑Index，真的？
技术上，z-index 控制沿 z 轴（从屏幕向你伸出的想象线）定位元素的堆叠顺序。z-index 值越大，元素离用户越近。
重要提示： z-index 仅在 定位 的元素上有效——即具有 position: absolute、relative、fixed 或 sticky 的元素。它也适用于 flex 项。对默认的静态定位元素（默认值）使用 z-index 不会产生任何效果。
Source: …
第 1 件大家常犯的错误：堆叠上下文
创建一个新的堆叠上下文会改变规则。当一个元素创建堆叠上下文时，它子元素的 z-index 值被限制在该上下文内部；它们只能相互竞争，而不能与父元素之外的元素竞争。
新的堆叠上下文是如何产生的
堆叠上下文的形成不仅仅是对定位元素设置非 auto 的 z-index，还有多种其他 CSS 属性也会意外地创建堆叠上下文：
opacity小于 1- 任意
transform（例如translate、scale、rotate） filter、mix-blend-mode、isolation- 某些 flex 和 grid 配置
这解释了经典的疑惑：“为什么我的子元素 z-index: 9999 仍然在另一个 z-index: 5 的元素后面？”答案通常是子元素的父元素创建了一个堆叠上下文，而该上下文的有效堆叠顺序更低。
实际案例：被困的工具提示
（插入您自己的代码或描述一个因其父元素形成堆叠上下文而被隐藏的工具提示。）
Source: …
管理 Z‑Index 的专业实践
本地规则 vs. 全局规则
-
本地： 在单个组件内部进行层叠（例如，按钮图标位于其背景之上，卡片的阴影位于下一个卡片之上）。使用小的数值，如
z-index: 1，并在组件根元素上创建新的堆叠上下文：.component { position: relative; z-index: 0; /* 创建本地堆叠上下文 */ } -
全局： 跨组件交互的页面级主要 UI 元素的层叠（例如，页眉、模态框、下拉菜单、侧边栏、通知）。在单一、中心位置统一管理这些数值。
将全局 Z‑Index 规模集中管理
在一个文件中使用 CSS 变量（或预处理器）定义所有全局层级。
:root {
--z-index-header: 100;
--z-index-dropdown: 200;
--z-index-modal-overlay: 300;
--z-index-modal: 400;
--z-index-notification: 500;
--z-index-tooltip: 600;
}从 100 开始可以提供心理和实际的缓冲区。低于 100 的数值可用于本地堆叠，而无需担心冲突。
使用逻辑且易维护的系统
以 100 为步长（或其他舒适的间隔）递增，可提供充足的空间（99 个插槽！）在不重构的情况下插入新的全局层级。例如，在下拉菜单和模态框之间加入一个新的 “侧边栏” 层级，可设为 250。
关键要点： 绝对数值并不重要，重要的是相对顺序。z-index: 2 永远会位于 z-index: 1 之上、z-index: 3 之下，无论数值有多大。
实际案例与代码片段
带阴影的固定页眉
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: var(--z-index-header); /* 100 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}模态对话框
/* Overlay – sits just below the modal */
.modal-overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
background: rgba(0,0,0,0.5);
z-index: var(--z-index-modal-overlay); /* 300 */
}
/* Modal content – must be above the overlay */
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-index-modal); /* 400 */
}下拉菜单（局部上下文）
.nav-item {
position: relative; /* positioning reference */
z-index: 0; /* creates a new stacking context */
}
.dropdown {
position: absolute;
top: 100%;
z-index: 1; /* competes only inside .nav-item */
}常见问题：关于 Z‑Index 的燃眉之急，答案在此
Q: 我可以使用负的 z-index 值吗？
A: 可以，但仅限于已定位的元素。负值会将元素放置在其堆叠上下文的背景之后，可能导致它无法响应指针事件。
Q: 我真的需要多少层 z-index？
A: 只要满足 UI 需求即可，但请保持层级的逻辑性并做好文档记录。过度使用随意的数字会导致维护困难。
Q: z-index 的最大或最小值是多少？
A: 规范将 z-index 定义为整数。实际上，浏览器支持的值至少到 2,147,483,647（32 位有符号整数）。不建议使用极大的数值；应依赖相对顺序。