iframe 的 z-index 永远“赢”过普通元素，因其是独立渲染上下文，内部内容层级受限于 iframe 自身的定位与层叠上下文；需设置 position 和 z-index 才生效，且受父容器 transform 等属性影响。
iframe 的 z-index 为什么永远“赢”过普通元素
因为 iframe 是一个独立的渲染上下文，它的整个文档树天然处于一个独立的层叠上下文中——这个上下文的起始层级由 iframe 元素自身的 z-index 决定，而它内部所有内容（包括 body、div、甚至 position: fixed 元素）都只能在这个上下文里比大小。你给页面里的按钮设 z-index: 999999，它再高也跨不过 iframe 这堵墙。
iframe 元素本身必须参与层叠顺序竞争
很多人只给 iframe 内部元素加 z-index，却忘了 iframe 标签自己才是那个要“出头”的定位节点：
- iframe 默认是
display: inline+position: static，此时它的z-index完全无效 - 必须显式设置
position: relative或absolute或fixed，z-index才开始起作用 - 如果 iframe 是响应式嵌入（如第三方地图、支付弹窗），它常被包裹在
div里，而那个div可能带transform或opacity——这会让 iframe 被锁进另一个层叠上下文，进一步削弱它的全局层级竞争力
排查 iframe 层级干扰的实操路径
打开 Chrome DevTools，按以下顺序查：
- 选中 iframe 元素 → 右侧面板 «Computed» → 看
z-index是否显示为(not applicable)：如果是，说明它没定位 - 逐级向上点父节点 → 在 «Layout» 标签页盯住 «Stacking context» 字样：第一个标为
Yes的祖先，就是 iframe 被“关进去”的结界源头 - 临时删掉父容器的
transform、opacity、filter，观察 iframe 是否突然能被盖住了——这是最直接的验证 - 检查 iframe 的
width/height是否为0或被overflow: hidden截断：即使层级对了，视觉上也“看不见”遮挡效果
真正有效的修复方式不是堆数字
给 iframe 外层 div 加 z-index: 9999 不一定管用，尤其当它和你的弹窗不在同一 DOM 分支时。更务实的做法：
- 把需要覆盖 iframe 的元素（比如 tooltip、遮罩层）用
position: fixed挂到body最顶层，并确保它没有被任何祖先触发层叠上下文（比如删掉 body 上多余的transform） - 如果 iframe 是你可控的（如内嵌管理后台），在 iframe 标签上直接加
style="position: relative; z-index: 1;"，并确认其父容器没创建新上下文 - 遇到第三方插件（如微信支付 SDK、地图 JS API）注入的 iframe，它们常自带
z-index: 2147483647——这时别硬刚，改用pointer-events: none配合visibility: hidden临时让 iframe “退场”，再 show 回来
最常被忽略的一点：iframe 的层级不是靠它内部内容决定的，而是由它自身在父文档中的定位属性和堆叠上下文位置决定的。每次想调大数字前，先看它有没有 position，再看它被谁“套着”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
