iframe本身不能设z-index，因其默认position:static，必须给其父容器设position:relative并配z-index，且父容器不可含transform/opacity/filter等触发新层叠上下文的属性。
iframe 本身不能设 z-index
直接给 <iframe></iframe> 标签写 style="z-index: 999" 完全无效——因为 iframe 默认是 position: static，而 z-index 只对已定位元素（relative/absolute/fixed/sticky）生效。浏览器会默默忽略这个设置。
真正要改的是它的**父容器**：
- 给 <iframe></iframe> 的直接父元素加 position: relative（或 absolute）
- 再给这个父容器设 z-index
- 确保该父容器没有触发新层叠上下文（比如没用 transform、opacity、filter）
为什么 iframe 总是“盖住”下拉框、弹窗、二级菜单
根本不是 z-index 数值不够大，而是 iframe 自身创建了独立的层叠上下文（stacking context），导致它和页面其他元素不在同一个“比大小”的层级空间里。
常见触发条件（检查父级 DOM 节点的 computed 样式）：
- transform: translateZ(0) 或任何 transform
- opacity: 0.99（哪怕只是 0.99，不是 1）
- filter: blur(1px)、will-change: transform
临时验证：在开发者工具中逐层禁用这些属性，看遮挡是否消失。必须修复源头，而不是堆 z-index。
弹窗里嵌 iframe，底部内容被裁剪
这不是层级问题，而是容器溢出控制惹的祸。Layui、Element Plus 等框架的弹窗容器（如 .layui-layer-content）默认设了 overflow: auto，会直接裁掉 iframe 中超出部分——滚动也看不到。
解决方法：
- 不要全局改 overflow，用 skin 参数隔离样式（Layui）或自定义 class 包裹 iframe 容器
- 加 overflow: visible !important 到该容器上
- 同时确保 iframe 页面内部的 和 没锁死高度（删掉 overflow: hidden、height: 100%）
- 动态内容加载后，手动调 layer.iframeAuto(index) 或监听 load 事件再适配高度
子页面 modal 遮罩盖不住整个父页
iframe 内部的遮罩永远只能盖住 iframe 视口区域，不可能延伸到父页面。想实现“全屏遮罩”，必须由父页面来画。
关键动作：
- 子页面通过 window.parent.postMessage({ type: 'MODAL_OPEN' }, 'https://trusted-origin.com') 发信号
- 父页面监听 message 事件，校验 event.origin 后，在 document.body 最外层插入遮罩 DOM
- 遮罩层用 position: fixed + top: 0; left: 0; width: 100%; height: 100%
- 滚动时需同步更新遮罩 height（监听 scroll 或用 ResizeObserver）
最容易被忽略的是：遮挡常是三重叠加——父容器层叠上下文断裂 + iframe 内容被裁剪 + 子页面高度未响应式撑开。单点修改大概率白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
