z-index 失效的根源是层级结构混乱而非数值错误，需满足非 static 定位且避免父级创建意外堆叠上下文；应建立分层数值体系（如基础层-10~0、浮层层1000~1999）并用 DevTools 的 Layers 面板验证。
直接说重点：层级混乱不是 z-index 数值没设对，而是缺乏结构化分层意识。只要建立清晰的 z-index 分层规则，并配合定位与堆叠上下文认知，就能系统性解决。
明确 z-index 生效的前提条件
z-index 不是“一设就灵”的属性，它必须满足两个硬性条件：
- 元素的 position 必须是非 static 值（如 relative、absolute、fixed、sticky）；
- 该元素不能被父级无意创建的低层级堆叠上下文锁死——比如父元素加了 transform、opacity: 0.99 或 fixed 且 z-index 较低，都会让子元素再高的 z-index 也出不去。
建立可维护的 z-index 分层数值体系
避免用 9999、2147483647 这类“魔法数字”，推荐按功能角色划分固定区间，留足余量便于后期扩展：
- 基础层（-10 ~ 0）：全屏遮罩背景、固定底图、禁用态蒙层（可用负值压在内容之下）；
- 内容层（10 ~ 99）：普通卡片、文章区域、表单容器；
- 导航/工具层（100 ~ 199）：顶部导航栏、侧边栏、浮动操作按钮（FAB）；
- 浮层层（1000 ~ 1999）：模态框（modal）、全局提示（toast）、下拉菜单（dropdown）；
- 强干预层（2000+）：调试浮窗、远程控制面板、无障碍焦点高亮等特殊场景。
识别并规避堆叠上下文陷阱
很多“设了 z-index 却不生效”的问题，根源在父级悄悄创建了新上下文。以下操作会自动创建独立堆叠上下文，需特别留意：
立即学习“前端免费学习笔记（深入）”；
- 根元素（red">html）天然拥有一个；
- 设置了 position: fixed/sticky 且 z-index 不为 auto 的元素；
- opacity （哪怕只是 0.999）；
- transform、filter、clip-path、will-change 等属性被启用；
- flex 或 grid 容器中，子项设置了 z-index（非 auto）时也会触发。
一旦发现子元素“怎么调都不出来”，立刻检查其最近的、有上述任一特性的父级——它很可能就是层级牢笼。
调试与验证的实用方法
别靠猜，用浏览器开发者工具快速定位问题：
- 用“选择元素”工具点选目标元素，在 Styles 面板确认 position 和 z-index 是否生效（未生效会带删除线）；
- 在 Layers 面板（Chrome DevTools → More Tools → Layers）查看实际渲染层级结构，直观识别上下文分组；
- 临时给可疑父容器加 outline: 2px solid red，观察是否意外形成了隔离区域；
- 对关键浮层统一加 class（如 .z-modal），通过 CSS 自定义属性集中管理：
:root { --z-modal: 1050; }，再写 .z-modal { z-index: var(--z-modal); }，便于全局调控。
