z-index不生效主因是未触发层叠上下文：元素需为定位元素（position≠static），且受最近层叠上下文父容器限制；父元素设transform、opacity等会隐式创建新上下文，导致子z-index仅在该范围内生效。
z-index 不生效的常见原因
直接写 z-index 却没效果，大概率是因为元素没触发“层叠上下文”。z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）生效，且它的作用范围受限于最近的层叠上下文父容器。
- 父元素用了
transform、opacity、filter等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该父容器内比较 - 两个同级元素，一个有
z-index: 10，另一个没设z-index（即默认auto），后者实际层叠顺序可能更高——因为auto在某些情况下等价于0，但更关键的是它不参与层叠上下文排序 - 用
position: static（默认值）的元素，无论设多少z-index都无效
flex 布局能替代 z-index 吗
不能直接替代，但能绕过部分堆叠问题。Flex 本身不控制 z 轴，但通过 order 属性可调整子项的视觉渲染顺序（仅限 flex 容器内），且不会引入新的层叠上下文，避免了 z-index 的嵌套陷阱。
-
order值越小，越靠前渲染（注意：这是文档流顺序，不是绝对层叠优先级） - 若需真正三维堆叠（比如遮罩层盖在弹窗上），仍需配合
position+z-index - 多个 flex 容器嵌套时，
order仅在各自容器内有效，跨容器不可比
调试堆叠层级的实用方法
浏览器开发者工具里看不到真实的层叠结构，得靠手动验证：
- 右键检查元素 → 在 Styles 面板确认
position值和z-index是否被覆盖或计算为auto - 在 Elements 面板中逐级向上看父元素是否设置了
transform、will-change、opacity: 0.99等隐式创建层叠上下文的属性 - 临时给疑似干扰的父元素加
z-index: 0并设position: relative，强制它成为层叠上下文根，再观察子元素行为
哪些场景必须老老实实用 z-index
当涉及模态框、下拉菜单、Tooltip、固定导航栏与滚动内容交叠时，z-index 是唯一可控手段。这类组件往往跨 DOM 层级、动态插入、需精确控制遮挡关系。
立即学习“前端免费学习笔记（深入）”；
- 推荐建立一套轻量级
z-index命名变量（如--z-nav: 100、--z-modal: 1000），避免魔数 - 不要用超大数值（如
999999），留出扩展余地；相邻层级建议间隔至少 10 - 注意 SSR 或服务端渲染时，CSS 作用域或样式隔离可能导致
z-index被重置，需在组件级显式声明
z-index 错乱往往不是值设错了，而是你没意识到某个父元素悄悄成了层叠上下文的“结界”。查的时候别只盯目标元素，多往上翻两层。 
