弹窗被盖住的根本原因是未正确创建堆叠上下文或被父级堆叠上下文限制；需检查其position是否非static、z-index是否生效，并确认父容器是否意外触发了stacking context（如opacity
为什么弹窗总被其他元素盖住？先查 position 和 stacking context
弹窗（比如 .modal 或 .tooltip）写上 z-index: 9999 还是被压，根本原因不是数值不够大，而是它没真正“入场”——要么自己没定位，要么被父级堆叠上下文锁死。
- 检查弹窗元素的
position是否为relative、absolute、fixed或sticky；static（默认）或未声明时，z-index直接被浏览器忽略 - 打开 DevTools →「Computed」面板 → 搜索
z-index，确认它显示的是具体数字（如9999），而不是auto - 再搜
stacking context，看弹窗的直接父容器是否被标记为「Stacking Context」——如果是，那它的z-index只在父容器内部有效，跨不出去
父容器悄悄创建了 stacking context？这些 CSS 属性会触发
很多看似无害的样式，会意外让父容器变成“小 boss”，把弹窗困在自己的层级牢笼里。最常踩坑的是：
-
opacity: 0.99或任意小于 1 的值 -
transform: translateZ(0)、scale(1)、rotate(0deg)等非none值 -
will-change: transform（哪怕只为了硬件加速） -
filter: blur(0)、drop-shadow(none)等非none值 -
position: relative+z-index: 0（注意：z-index: auto不触发，但0会）
临时验证方法：在 DevTools 中注释掉父容器的上述任一属性，观察弹窗是否立刻浮出——如果恢复了，就定位到问题根源。
弹窗要盖住 iframe，只能靠 DOM 同级插入
iframe 是独立文档环境，它的渲染层和父页面完全隔离。z-index 再高也穿不透，这不是 bug，是规范行为。
- 不能指望在
iframe外部写个遮罩层，然后靠z-index盖住它 - 必须把遮罩层（如全屏蒙层）和
iframe放在**同一级 DOM 节点下**，且确保遮罩层的父容器有更高堆叠优先级 - 常见做法：把
iframe和遮罩都包裹进一个position: relative容器，再给遮罩设position: absolute+z-index: 1000，而iframe设z-index: 1
z-index 数值管理不是堆数字，而是建层级契约
盲目写 z-index: 2147483647 只会让后续维护崩溃，真正有效的策略是分层预留、按需分配：
- 基础层（背景、边框）：
z-index: -1到9 - 内容层（卡片、表单）：
z-index: 10到99 - 浮层层（下拉、Tooltip）：
z-index: 100到499 - 模态层（
.modal、全屏 Loading）：z-index: 500到999 - 强提示层（Toast、系统 Alert）：
z-index: 1000+，但避免用最大整数
关键点在于：所有弹窗组件的 z-index 必须落在同一上下文中才有可比性；一旦嵌套过深或父级触发新上下文，数值再大也白搭——最终得靠 DevTools 的「Layers」或「Computed」面板一层层往上扒 DOM 和 stacking context 链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
