在app.vue中添加.uni-toast, .uni-modal { z-index: 999999 !important; }可根治uni.showtoast和uni.showmodal被遮挡问题，因其是全局组件，局部样式无效，必须通过app.vue全局样式穿透覆盖。
uni.showToast/uni.showModal被遮住，直接改App.vue的z-index
UniApp里uni.showToast和uni.showModal是全局组件，渲染在页面DOM树之外，但默认z-index偏低（通常为1000左右）。如果页面里某个容器设置了z-index: 9999或用了transform、opacity等触发层叠上下文的属性，弹窗就会被盖住。
最简单有效的做法：在App.vue的<style></style>里加两行：
.uni-toast, .uni-modal { z-index: 999999 !important; }
注意：!important必须加，因为uni内部样式有内联或高优先级规则；不要写在某个页面组件里，局部样式无法影响全局弹窗节点。
弹窗里el-select下拉框被截断，先查overflow再调teleport
Element Plus的el-select下拉菜单默认用teleport挂载到body，但如果父容器设置了overflow: hidden或overflow: auto，即使下拉框在body上，视觉上也会被裁切——尤其在scroll-view或uni-popup里常见。
- 检查弹窗容器是否带
overflow，改成overflow: visible或删掉 - 显式指定
el-select的teleport目标：<el-select teleport="body"></el-select> - 避免给弹窗设过高z-index（比如
z-index: 999999），el-select下拉框默认z-index约2000，设成z-index: 2100更安全
dialog::backdrop没效果？先确认showModal()真执行了
dialog::backdrop伪元素只在dialog.showModal()调用后才生成。写<dialog open></dialog>或只调show()，DevTools里根本看不到::backdrop节点，CSS自然不生效。
常见误操作：
-
<dialog open></dialog>+dialog::backdrop { background: rgba(0,0,0,0.5); }→ 完全无效 - 组件还没挂载就调
dialog.showModal()→ 静默失败，无报错 - 在Safari/Firefox里用
backdrop-filter→ 当前仍不支持，会被灰掉
稳定方案：手动加一个<div id="modal-backdrop" style="position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.5);"></div>，再把dialog放它上面。
fixed底部栏被遮，重点不是z-index而是层叠上下文
单纯加大z-index经常没用，真正卡点是父容器触发了新层叠上下文。比如页面根容器加了transform: translateZ(0)或opacity: 0.99，整个子树的z-index就只在该上下文内生效。
排查步骤：
- 用DevTools逐级往上检查，看哪个父元素有
transform、filter、will-change或opacity - 底部元素自身必须是
position: fixed，且z-index值要大于遮挡它的同级fixed元素（如导航栏） - iOS Safari里，加
backface-visibility: hidden能提升fixed渲染稳定性
层级冲突往往藏在看不见的地方，别只盯着弹窗本身调z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
