17370845950

z-index不生效需先确认元素是否已定位；它仅对position为relative、absolute、fixed或sticky的元素有效，static下被忽略；还需注意层叠上下文限制及transform等属性的影响。

z-index 不生效？先确认元素是否已定位

很多情况下给元素加了 z-index 却没效果，根本原因是它只对「已定位元素」起作用。也就是说，position 值必须是 relative、absolute、fixed 或 sticky 之一，static（默认值）下 z-index 完全被忽略。

• 检查浏览器开发者工具中该元素的 computed 样式，确认 position 确实不是 static
• 如果只是想抬高层级而不改变布局，用 position: relative; 最安全
• 避免在父容器上误设 transform、filter、opacity 等属性——它们会创建新的层叠上下文，导致子元素的 z-index 只在该上下文中生效，无法和外部元素比高低

多个 z-index 值怎么比较？看层叠上下文层级

z-index 不是全局排序，而是按「层叠上下文（stacking context）」分组比较。一个元素的最终显示顺序，取决于它所属的最内层上下文，以及该上下文在父上下文中的位置。

• 根元素（）天然创建一个层叠上下文
• 任何设置了 z-index 且 position 非 static 的元素，都会创建新的层叠上下文（前提是 z-index 不是 auto）
• 父元素 z-index: 10，子元素即使设 z-index: 999，也无法盖过另一个 z-index: 11 的同级兄弟元素

.parent { position: relative; z-index: 10; }
.child { position: absolute; z-index: 999; } /* 这个 999 只在 parent 内部有效 */
.sibling { position: relative; z-index: 11; } /* sibling 会盖住整个 parent 及其子元素 */

遮挡问题调试：快速定位谁在顶层

遇到遮挡时，别急着调数字，先用浏览器 DevTools 快速验证层级结构：

• 在 Elements 面板中选中被遮挡的元素，右键 → Scroll into view，确认它确实存在且未被 display: none 或 visibility: hidden
• 在 Styles 面板中逐个禁用疑似遮挡元素的 position 和 z-index，观察遮挡是否消失
• 打开 Rendering 面板（Chrome），勾选 Paint flashing 或 Layer borders，可直观看到哪些元素触发了新图层
• 注意：z-index 支持负值，比如 z-index: -1 会让元素落到父容器背景之下（但前提是父容器不是根上下文且未裁剪）

常见误用场景与替代方案

不是所有遮挡都该靠 z-index 解决。盲目堆高数值可能掩盖更深层的布局问题：

• 下拉菜单/弹窗被 iframe 或 video 盖住？老版 IE/Edge 中需给 iframe 加 iframe { wmode: "transparent"; }（仅部分支持），现代浏览器优先用 iframe { allow="accelerometer;..."} 并确保无 z-index 冲突
• 固定定位的导航栏挡住页面内容？与其给内容加 z-index，不如给导航栏加 backdrop-filter 或留出 padding-top 避免重叠
• Flex/Grid 子项之间遮挡？优先考虑 order 属性或 DOM 顺序调整，z-index 在 Flex/Grid 容器中是合法的，但语义上不如结构控制清晰

真正难调的往往不是数值大小，而是层叠上下文嵌套太深，或者某个祖先元素悄悄创建了隔离环境。遇到反复无效，先删掉可疑的 transform 和 opacity，再一层层往上查 z-index 和 position。