ElementUI 的 Message、Notification 或 alert() 被遮挡，主因是父级意外创建堆叠上下文（如 opacity
ElementUI 的 Message、Notification 或原生 alert() 被弹窗盖住，不是 z-index 数值不够大，而是它们压根没进同一个“行政辖区”——即堆叠上下文（stacking context）被父级意外切断了。
为什么写上 z-index 也没用？先查 position 和 stacking context
浏览器只认 position: relative、absolute、fixed 或 sticky 的元素，static（默认）下写 z-index: 999999 等同于没写。DevTools 的「Computed」面板里如果 z-index 显示为 auto，说明它根本没生效。
更隐蔽的问题是父容器创建了新堆叠上下文，把提示组件“关在里面”。常见触发条件包括：
-
opacity小于 1（哪怕只是0.99） -
transform非none（如translateZ(0)、scale(1)） -
will-change: transform或filter: blur(0) -
position: relative+z-index: 0（注意：z-index: auto不触发，但0会）
验证方法：在 DevTools 中临时注释掉父级这些样式，看提示是否立刻浮出。
立即学习“前端免费学习笔记（深入）”；
ElementUI 提示组件被 Dialog 盖住的修复路径
ElementUI 默认所有组件基础 zIndex 都是 2000，且递增逻辑简单（+1），容易撞车。重点不是调单个组件的 zIndex，而是统一拉高基准线：
- 在
main.js入口处，用配置方式重设全局基准：Vue.use(ElementUI, { zIndex: { dialog: 3000, message: 4000, notification: 5000 } }) - 或直接覆盖组件 props（适用于旧版或局部调整）：
ElementUI.Message.props.zIndex.default = 4000
- 避免混用两种方式，否则后者可能被前者覆盖
注意：仅改 Message 的 zIndex 不够，必须同步确保其父容器（比如 body）没有意外创建堆叠上下文，否则数值再高也出不去。
动态插入的提示层被 iframe 盖住怎么办？
iframe 是独立文档环境，它的渲染层天然高于普通 DOM。靠 z-index 堆数字永远盖不住它——这是规范，不是 bug。
唯一可靠做法是让遮罩层和 iframe 处于 DOM 同一级，并由共同父容器管理层级：
- 把提示层（如
Message容器）和iframe都移入同一个position: relative的 wrapper 中 - 给该 wrapper 设
z-index: 1000，再分别控制子元素顺序：.wrapper { position: relative; z-index: 1000; } .wrapper > iframe { z-index: 1; } .wrapper > .el-message { z-index: 2; } - 绝对不要在 wrapper 或其子元素上加
transform、opacity ，否则又分裂上下文
真正卡住人的从来不是 z-index 数值本身，而是你没意识到那个看似无害的 opacity: 0.99 或 transform: scale(1) 已经悄悄把你关心的元素关进了另一个世界。每次调层级前，先打开 DevTools 看一眼「Stacking Context」标记在哪。
