z-index不生效的主因是父元素创建了新的堆叠上下文；需检查position非static、opacity
z-index 不生效？先确认是否创建了新的堆叠上下文
很多情况下改了 z-index 没反应，不是写错了，而是父容器悄悄“截断”了层级关系。只要一个元素设置了 position 且值不为 static，同时又带有 z-index、opacity 小于 1、transform、filter 等属性，它就会创建新的堆叠上下文——子元素的 z-index 只在这个上下文里比较，和外部完全无关。
- 检查父级是否有
opacity: 0.99或transform: translateZ(0)这类“隐形触发器” - 用浏览器开发者工具的“Layers”面板（Chrome）或“Computed”里的
stacking context查看是否意外创建 - 临时移除父级的
filter或will-change，看z-index是否恢复作用
z-index 数值怎么设才安全？别只写 9999
z-index 是整数，但不是越大越好。不同框架、组件库可能各自预留了层级区间，硬塞一个超大值容易引发覆盖冲突，尤其在嵌入第三方 UI（如弹窗、Tooltip）时。
- 主流 UI 库常用范围：
Modal在 1000–1500，Tooltip在 2000+，Backdrop常为 999 - 建议按用途分层：基础层（0–99）、浮层（100–499）、弹窗（500–999）、全局提示（1000+）
- 避免用
z-index: 999999—— 它不会比9999“更上层”，只是让后续调试更痛苦
absolute 定位元素重叠，但 z-index 仍错乱？检查 position 值
z-index 只对定位元素有效，而 position: static（默认值）完全无视它。常见错误是只写了 z-index，忘了加 position。
- 必须同时设置：
position: relative/absolute/fixed/sticky -
position: relative最常用，不改变文档流，适合微调局部层级 - 如果两个元素都用
absolute，它们的层级比较只取决于z-index，和 HTML 顺序无关；但如果都没设z-index，则按 DOM 顺序后出现的覆盖前面的
Flex 或 Grid 容器里 z-index 失效？注意渲染顺序优先级
Flex 和 Grid 容器内部，子项的绘制顺序默认由 order 属性或源顺序决定，z-index 仅在它们被设为定位元素后才起作用——这点和普通块级流不同。
- Flex/Grid 子项即使没
position，也能用z-index控制层叠（这是 CSS 规范特例），但前提是父容器是display: flex或grid - 不过一旦给子项加上
position: absolute，它就脱离 Flex/Grid 布局，此时z-index行为回归标准规则，需确保父容器有position: relative作为参照 - 跨容器重叠时（比如 Grid 内一个弹窗要盖住隔壁 Flex 区域），必须统一到同一个堆叠上下文里，否则数值再大也没用
堆叠上下文是隐性的，但它才是 z-index 起作用的真正边界。调层级前，先用 DevTools 看清谁包着谁、谁创建了上下文——比反复试数值靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
