弹窗被头部盖住的根源是层叠上下文隔离而非z-index数值不足：弹窗需设position（如relative）才能激活z-index；其父级若满足opacity
弹窗被头部盖住，不是 z-index 数值不够大，而是它根本没“入场”——要么自己没定位，要么被某个祖先元素锁死在局部层叠上下文里。
检查弹窗自身是否已定位
z-index 对 position: static（默认值）完全无效。哪怕你写了 z-index: 999999，只要没声明 position，浏览器就当它不存在。
- 必须显式设置
position: relative、absolute、fixed或sticky - 优先用
position: relative：不改变布局，又能激活 z-index - 在 DevTools 的 «Computed» 面板里搜
z-index，确认显示的是具体数字（如9999），而不是auto
查父级是否悄悄创建了层叠上下文
弹窗的直接或间接父容器只要满足以下任一条件，就会变成“结界”，把弹窗的 z-index 锁死在内部：
-
opacity小于 1（比如opacity: 0.99） -
transform不为none（哪怕只是transform: translateZ(0)） -
filter不为none（如filter: blur(0)） will-change: transform-
position: relative+z-index: 0（注意：z-index: auto不触发，但0会）
打开 Chrome DevTools → Elements → 选中弹窗 → Computed → 搜 stacking context，第一个标为 This element establishes a stacking context 的祖先就是问题源头。
确认头部是否也建立了独立层叠上下文
常见情况是头部容器（如 .header 或 #app）本身设置了 position: relative 和 z-index: 100，又加了 transform 或 opacity，导致它成了一个高优先级的“房间”。弹窗即使 z-index 是 9999，也只能在自己父容器的房间里比大小，出不去和头部比。
- 临时注释掉头部的
transform、opacity、filter，看弹窗是否立刻浮出 - 不要只盯着弹窗调高 z-index，先确保头部的 z-index 没有意外设得过高（比如
z-index: 999999） - 如果头部用了
position: fixed，它天然创建层叠上下文，且初始层级高于普通文档流；此时弹窗必须用position: fixed+ 更高 z-index 才能覆盖
移动端和 iframe 场景要额外小心
在 iOS Safari、安卓微信 X5 内核等环境，<video></video> 或某些第三方组件可能强行置顶，z-index 完全失效；iframe 则是独立渲染树，外部遮罩无法靠 z-index 盖住它。
- 移动端弹窗被盖，重点查
html、body或轮播 wrapper 上的transform和opacity - 要盖住 iframe，遮罩层和 iframe 必须同级插入 DOM，且遮罩父容器需有更高堆叠优先级（比如
position: relative+z-index: 1000） - 避免给弹窗设超大 z-index（如
2147483647），它可能压住 Element Plus 的过渡层或 Toast 动画，引发点击失效
真正卡住的点往往不在弹窗本身，而在离它两三级远的某个父容器上——那个加了 opacity: 0.99 的轮播 wrapper，或者为了硬件加速随手写的 will-change: transform，才是让 z-index 彻底失语的元凶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
