z-index失效主因是元素未定位或父级创建了层叠上下文；需确认position非static，并检查祖先是否触发stacking context（如opacity
z-index 设了却没用，不是值不够大，而是它根本没生效——要么元素没定位，要么被父级“关进小房间”里了。
检查 position 是否真的非 static
z-index 对 position: static（默认值）完全无效，写成 z-index: 999999 也白搭。关键看 computed 值，不是源码里写了就算数。
- 打开 DevTools → 选中被遮挡的元素 → 右侧 «Computed» 面板搜
position，确认值是relative、absolute、fixed或sticky - 特别注意响应式断点：桌面端设了
position: fixed，移动端媒体查询里漏写，就会退成static -
position: relative最稳妥——不脱离文档流，又能激活z-index；position: absolute要确保最近已定位祖先存在，否则top/left会相对于 viewport 计算
排查父级是否悄悄创建了层叠上下文
只要某个祖先元素触发了层叠上下文（stacking context），它的整个子树就变成一个独立“房间”，子元素的 z-index 只能在这个房间里比大小，出不去。
- 这些属性一出现，就等于加了玻璃罩：
opacity: 0.99、transform: translateZ(0)、filter: blur(0)、will-change: transform、isolation: isolate、position: fixed且z-index不为auto - 重点盯
z-index: 0：它和z-index: auto行为完全不同——前者会建新上下文，后者不会 - 用 Chrome DevTools → 选中元素 → «Computed» 搜
stacking context；显示This element establishes a stacking context的第一个祖先就是问题源头
验证是否真由层叠上下文导致
别靠猜，用两个最直接的验证方式快速锁定问题。
- 在 DevTools 中临时删掉可疑父级的
transform、opacity、filter，看遮挡是否立刻消失 - 把目标元素（比如弹窗或下拉菜单）剪切出来，用 JS 直接
document.body.append()，再测试层级——如果这时能正常显示，100% 是父级层叠上下文问题 - 打开 «Rendering» → 勾选
Show layers panel→ 切到 «Layers» 标签页，每个层叠上下文对应一个 DOM 节点，点击就能高亮
数值堆再大也没用，关键是层级归属
z-index: 9999 不是万能钥匙。它只在一个层叠上下文中有效；跨上下文时，比的是父级的“房门高度”，不是子元素的数字。
- 例如：
.modal在#app内，而遮挡它的.header是body直接子元素——它们的共同祖先虽是body，但各自父级已分别创建了独立层叠上下文 - 第三方组件（如地图 SDK、视频播放器）常暗中触发层叠上下文，你调自己的
z-index完全无效 - 避免滥用
z-index：全局层级建议用 CSS 自定义属性统一管理，如--z-nav: 100、--z-modal: 1050；不要散落在各处硬写9999
真正难的不是写多少，而是搞清当前元素到底在哪个“房间”里——DevTools 的 «Layers» 面板和 «Computed» 里的 stacking context 提示，比任何经验都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
