ElementUI的Message被Dialog遮住应统一调整zIndex分层：message设为2100、modal为2000、全屏遮罩2200；原生dialog需挂载到body并避免父容器触发堆叠上下文；z-index生效前提为元素已定位。
ElementUI 的 Message 被 Dialog 遮住怎么办？
直接改全局 zIndex 配置是最稳的解法。ElementUI 默认把 Dialog 和 Message 都设为 2000，DOM 后渲染的会盖住先渲染的——这不是 bug，是设计如此。但业务上 Toast 必须「打断式可见」，所以得让提示高于弹窗。
- 在
main.js或项目入口处传入配置：Vue.use(ElementUI, { zIndex: { message: 2100, modal: 2000 } }) - 别只调高
message；如果还用Notification，也得一并设为 2100+，否则它仍会被遮 - 避免写成
message: 9999这类魔数——后续加个 Tooltip 或 Popover 就又得重排，建议按功能域分层：2000（弹窗）、2100（全局提示）、2200（全屏加载遮罩）
原生
不是 z-index 没设高，而是父容器触发了独立堆叠上下文（stacking context），把 锁死在局部层级里。常见于 Vue/React 组件内直接写 ，或包在带 transform、opacity: 0.99 的 div 里。
-
必须是document.body的直接子节点，否则showModal()静默失败，::backdrop不渲染，Esc 和 Tab 焦点都失效 - 修复方式：不要写死在模板里，用
document.body.appendChild(dialog)动态挂载 - 若页面含
，确保其父容器没设transform、filter、will-change—— 这些都会创建新堆叠上下文，使外部 modal 完全无法穿透
为什么改了 z-index 还是没用？
因为 z-index 只对已定位元素生效。很多开发者给警告元素加了 z-index: 9999，却漏了 position: fixed 或 position: absolute，结果该值被浏览器完全忽略。
- 检查「Computed」面板里
z-index是否显示为auto；如果是，说明定位属性缺失或值为static - 预览浮层、Toast、错误提示这类需全局置顶的元素，统一用
position: fixed+ 显式z-index - 警惕父级截断：哪怕子元素
z-index: 9999，只要最近的 stacking context 父节点（如设置了opacity: 0.99的 div）存在，它的层级就只能在该父节点内部比高低
多个警告同时出现时谁在最上面？
对于原生 ，浏览器 Top Layer 的顺序**只由 showModal() 调用顺序决定**，和 DOM 位置、插入顺序、自定义属性都无关。
- 先
dialogA.showModal()，再dialogB.showModal()→ B 在 A 上面 - B 关闭后，再调一次
B.showModal()→ B 重新回到栈顶，不是追加到末尾 - 未调用
showModal()的不进 Top Layer，只是普通文档流元素，可能被任意其他元素遮挡 - Shadow DOM 内的
同样适用此规则，但调用必须在正确上下文：this.shadowRoot.querySelector('dialog').showModal()
真正容易被忽略的是 stacking context 的隐式创建——它不报错、不警告，只默默把你精心设置的 z-index 锁死在某个看不见的盒子里。排查时优先看父容器有没有 transform、opacity、filter，而不是继续堆高数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
