z-index不生效的根本原因是父容器未创建层叠上下文；只有同层叠上下文中z-index才起作用，跨上下文时父级层叠等级优先。
z-index 不生效？先确认是否创建了层叠上下文
很多情况下 z-index 看似写了却不起作用，根本原因不是写错了值，而是父容器没触发层叠上下文。只有在同一个层叠上下文中，z-index 才能决定元素的前后顺序；跨上下文时，父级的层叠等级优先于子级的 z-index。
触发层叠上下文的常见方式包括：position 为 relative / absolute / fixed 且设置了 z-index（非 auto）、opacity 小于 1、transform 非 none、will-change 指定相关属性等。
- 别只盯着子元素加
z-index，先看它的最近一个「有层叠上下文」的父容器是否已确立层级地位 -
z-index: 0和z-index: auto效果不同：前者明确创建层叠上下文，后者不创建 - 用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」可辅助判断层叠上下文是否被意外创建
多个弹窗/浮层共存时，如何避免 z-index 值失控
项目里一旦出现 Modal、Tooltip、Dropdown、Toast 多种浮动组件，容易陷入“比谁的 z-index 更大”的泥潭——今天加到 9999，明天就得 99999，最后难以维护。
更可持续的做法是按功能类型划分层级区间，并用 CSS 自定义属性统一管理：
立即学习“前端免费学习笔记（深入）”；
:root {
--z-modal: 1000;
--z-dropdown: 900;
--z-tooltip: 800;
--z-toast: 700;
}
.modal { z-index: var(--z-modal); }
.dropdown { z-index: var(--z-dropdown); }
- 每个组件只使用自己区间的基准值，内部嵌套如遮罩层、箭头、内容区再用 +1、+2 微调
- 避免直接写死数字，尤其不要在组件局部样式里写
z-index: 2147483647这类“最大整数” - 注意：CSS 自定义属性不能在
@keyframes或伪元素::before的content中动态计算，但用于z-index完全安全
transform 会让 z-index 行为变奇怪？是的，而且很隐蔽
给一个元素加了 transform: translateZ(0) 或 scale(1) 后，它会自动创建新的层叠上下文——这意味着它的子元素的 z-index 只在它内部有效，无法穿透到外层同级元素中。
典型翻车场景：下拉菜单（Dropdown）用了 transform: translateY() 做入场动画，结果菜单项被后面一个没动过的 Header 盖住，怎么调 z-index 都没用。
- 检查动画是否无意中引入了
transform、filter、opacity等触发层叠上下文的属性 - 如果必须用
transform动画，就把整个浮层（包括触发按钮的逻辑父容器）一起提升层级，而不是只提子元素 - 临时调试可用
transform: none !important快速验证是否为该原因导致层级异常
Flex/Grid 容器里的子元素能用 z-index 吗
可以，但有个硬性前提：该子元素必须是「定位元素」，即 position 值为 relative、absolute、fixed 或 sticky。Flex 或 Grid 本身不改变 z-index 的生效规则。
容易误以为「Flex 子项天然支持 z-index」，其实是混淆了「绘制顺序」和「层叠顺序」：Flex 项默认按 DOM 顺序堆叠（类似普通文档流），此时 z-index 无效；只有显式定位后，z-index 才接管控制权。
- 想让某个 Flex 项浮在其他项上面，必须同时设
position: relative和z-index - Grid 中同理，
z-index不会因为用了grid-area就自动生效 - 注意：
position: static（默认值）下设置z-index完全被忽略，DevTools 里会显示为「invalid」
z-index 数字重要得多。实际调试时，优先关掉动画、还原 position、用 DevTools 的「Computed」面板看 z-index 是否被计算为 auto，往往比反复改数值更快定位问题。 
