element plus弹窗被遮挡的根源是层叠上下文与z-index计算规则，而非组件故障；需结合挂载位置、父容器position/overflow属性及teleport策略综合解决。
Element Plus弹窗被遮挡，根本不是组件“坏了”，而是CSS层叠上下文和z-index计算规则在起作用。直接调高z-index不一定管用，关键得看它挂在哪、父容器有没有“封印”、以及它和谁比层级。
el-table里MessageBox被盖住：z-index只是表象，根源在挂载位置
调用ElMessagebox.alert后弹窗卡在el-table下面，常见于表格行内操作触发场景。这不是z-index设低了，而是el-table__body或el-table__fixed这类内部容器自带z-index: 10甚至更高，且设置了position: relative，形成了独立层叠上下文——MessageBox再高的z-index也出不去这个“结界”。
- 最简解法：在全局样式中加
.is-message-box { position: relative; z-index: 9999; }，确保它脱离表格的层叠限制 - 如果仍被压，说明有其他组件（如
el-dialog）z-index更高，可临时升到99999，但需同步检查该组件是否也用了append-to-body - 别在
<style scoped></style>里写，必须进全局CSS或用:deep(.is-message-box)穿透
el-image预览弹窗被裁切：overflow:hidden才是真凶
el-image-viewer默认挂载在组件内部，一旦父级（比如el-dialog或el-card）设置了overflow: hidden，哪怕z-index是9999，预览层也会被物理裁掉一半。浏览器开发者工具里能看到.el-image-viewer__wrapper明明存在，但渲染区域被截断。
- 首选方案：加
:preview-teleported="true"，让预览DOM节点直接挂到下，彻底绕过父容器限制 - 次选方案：若版本低于2.3.0，改用
:preview-class="custom-preview"+ 全局.custom-preview { z-index: 3000 !important; }，并确保父容器overflow: visible - 注意：teleport后，遮罩层
.el-image-viewer__mask也要同步检查z-index，它默认是2000，可能比弹窗本体还低
el-select/el-date-picker下拉被弹窗挡住：teleport和z-index要配对用
弹窗里放el-select，下拉列表只显示一丁点，甚至完全不出现。问题常出在两个地方：一是弹窗自身z-index设太高（比如z-index: 999999），把默认挂到body的下拉菜单反向“压”在了自己下面；二是弹窗父容器设了overflow: hidden，直接把下拉内容裁掉。
- 推荐组合：给
el-select加popper-append-to-body（Vue 2）或teleport="body"（Vue 3），确保下拉DOM在body末尾 - 同时在全局样式里补一句
.el-select-dropdown { z-index: 9999 !important; }，让它稳稳高于弹窗（弹窗z-index建议控制在3000以内） - 如果必须禁用teleport（比如要响应父容器transform动画），那就得手动清除父容器的
overflow: hidden，或改用overflow: visible
el-drawer在el-dialog里消失：不是层级低，是它没“逃出来”
el-drawer在el-dialog内部打开时整个不见，或者只露个边——这大概率是因为el-drawer默认teleport到了body，但el-dialog的遮罩层.el-overlay也挂body且z-index更高，导致drawer被遮罩“吞掉”。它其实渲染了，只是被盖住了。
- 验证方法：F12查
.el-drawer是否在末尾，再查.el-overlay的z-index值（默认2000） - 修复动作：给
el-drawer加:modal-append-to-body="false"（Vue 2）或teleport="null"（Vue 3），让它留在dialog DOM内，再配合提升其z-index - 更稳妥做法：统一所有弹层都用
append-to-body，然后全局定义层级阶梯：.el-overlay { z-index: 2000; }、.el-dialog { z-index: 3000; }、.el-drawer { z-index: 4000; }
真正麻烦的从来不是z-index数字本身，而是那个看不见的层叠上下文边界——它可能藏在一行position: relative里，也可能卡在某个overflow: hidden的div上。动手前先用开发者工具点开.el-overlay和目标弹窗的computed styles，盯住position、z-index、overflow这三个属性，比盲目调数字快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
