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 等属性——它们会创建新的层叠上下文，导致子元素的 <code>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。
