iframe 内部是独立层叠上下文，z-index 无法跨文档生效；要覆盖 iframe，须将遮罩层与其同级放置于同一 position 非 static 的父容器内，且父容器不能触发新堆叠上下文。
iframe 是独立文档，z-index 无法跨边界生效
iframe 内部是一个完全隔离的 DOM 环境，它有自己的根层叠上下文（root stacking context），与父页面互不感知。你给父页某个 div 设置 z-index: 9999，对 iframe 里的按钮、弹窗或 canvas 没有任何影响——这不是 bug，是浏览器规范强制行为。
常见错误现象：div.overlay 明明设置了 position: fixed; z-index: 1000，却盖不住 iframe 里播放的视频或自定义菜单；或者用 JS 动态修改 iframe 外遮罩层的 zIndex 值，毫无反应。
- iframe 的渲染层和父页面不在同一坐标系，z-index 数值不具备跨文档可比性
- 即使 iframe 设置了
z-index: -1，它仍会按自身文档规则绘制，父页无法“压低”它 - 部分旧版 IE 曾允许用
iframe的z-index控制层级，但现代浏览器（Chrome/Firefox/Safari/iOS Safari）已统一遵循标准：跨文档无 z-index 通信
唯一可行方案：在 iframe 同级 DOM 插入覆盖元素
要让父页内容视觉上“盖住” iframe，必须把覆盖元素（如遮罩层、提示框）放在与 iframe 相同的父容器内，且 DOM 顺序在 iframe 之后，并确保该父容器自身不被截断层叠上下文。
示例结构（关键在顺序与父容器控制）：
<div class="container" style="position: relative"> <iframe src="widget.html" style="width:100%; height:300px;"></iframe> <!-- 遮罩层必须在此处，且与 iframe 同级 --> <div class="overlay" style="position: absolute; top:0; left:0; width:100%; height:300px; background:rgba(0,0,0,0.5); z-index: 10;"></div> </div>
- 父容器
.container必须有position: relative（或absolute/fixed），否则absolute子元素会相对于视口定位，可能错位 -
.overlay的z-index只需比 iframe 默认层高即可（iframe 默认属于z-index: auto层，数值为 0 的定位元素就能盖住） - 禁止在父容器上加
opacity 、<code>transform或显式z-index，否则会创建新堆叠上下文，导致.overlay被“封印”在局部上下文中，反而盖不住 iframe
iOS Safari 和某些嵌入式场景更敏感
iOS Safari 对触发堆叠上下文的属性极其严格，哪怕只是父容器用了 transform: translateZ(0) 或 will-change: transform，就可能让整个 iframe 区域突然“浮起”，把本该盖住它的遮罩层顶到下面。
排查建议：
- 打开 Safari 开发者工具 → 「Computed」面板 → 搜索
stacking context，确认 iframe 父容器是否被标记为独立上下文 - 临时注释掉父容器的
transform、opacity、filter，观察遮罩是否恢复覆盖效果 - 避免用
z-index: 2147483647强行堆高——数值再大也跨不过文档边界，只会掩盖真正的问题点
真正在意的不是 z-index 数字，而是谁在当“小 boss”
很多人反复调大父页遮罩的 z-index 却失败，本质是没意识到：iframe 本身就是一个“小 boss”，它内部所有元素都归它管；而你想盖住它的那个 div，如果被另一个带 z-index 的父容器包裹，那个父容器就成了新的“小 boss”，结果两个 boss 平级，谁也压不住谁。
最易被忽略的细节是：DOM 顺序 + 父容器是否干净。只要 iframe 和遮罩是同级、父容器没意外触发 stacking context，一个 z-index: 1 就足够盖住 iframe —— 因为 iframe 默认没有创建新上下文，它就老老实实待在 auto 层里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
