uni.showToast 在 H5 端被 TabBar 遮挡是因为其 z-index（约 1000–2000）低于 TabBar（9999）及高阶 fixed 容器，且受层叠上下文限制；需在 App.vue 中全局覆盖 .uni-toast 样式为 z-index: 19999 !important，并在启用 viewport-fit=cover 时叠加 bottom 和 padding-bottom 使用 env(safe-area-inset-bottom) 适配全面屏。
uni.showToast 被底部 TabBar 遮挡，本质是 z-index 作用域错位，不是位置问题，而是全局组件渲染层级未突破页面容器限制。
为什么 uni.showToast 会被遮住
uni-app 的 uni.showToast 在 H5 端是挂载在 <body> 下的独立节点，但默认 z-index 值偏低（约 1000–2000），而 H5 模拟的 TabBar 是 position: fixed + z-index: 9999；当页面内容区域存在更高层级的 fixed 容器（如自定义弹层、遮罩、地图等）时，toast 就会卡在它们下面。
- App 和小程序端 toast 是原生控件，天然高于所有 web 视图，所以不出现此问题
- H5 端 toast 是 DOM 元素，受 CSS 层叠上下文影响，父容器设了
transform、will-change或z-index都可能截断其提升路径 - 仅靠给 toast 加
z-index: 99999无效——它被包裹在.uni-toast内部，且该类名未暴露在页面样式作用域中
必须在 App.vue 中全局覆盖 .uni-toast 样式
因为 .uni-toast 是框架注入的全局组件，其样式无法通过单页面 <style> 影响，必须写在根组件里才生效：
<style>
.uni-toast {
z-index: 19999 !important;
}
</style>
- 加
!important是必须的，否则被框架内联样式覆盖 - 值设为
19999是为了明确高于 TabBar（通常9999）和常见弹窗（9998） - 不要只写
z-index: 99999——某些老版 HBuilderX 编译后会截断超大数值，19999是经实测最稳妥的上限
遇到自定义 TabBar 或安全区时需叠加 bottom 偏移
如果 Toast 文字紧贴屏幕底边，仍可能被 iPhone 全面屏的指示条“吃掉”，此时光调 z-index 不够，得配合垂直定位修正：
<style>
.uni-toast {
z-index: 19999 !important;
bottom: env(safe-area-inset-bottom) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
</style>
- 必须同时设置
bottom和padding-bottom，否则在部分安卓 WebView 中偏移失效 - 不用写
constant(safe-area-inset-bottom)——uni.showToast是 JS 控制显示时机的组件，无需兼容 iOS 11.2 以下（该版本已无实际用户） - 若项目已启用
viewport-fit=cover（推荐在index.html的<meta name="viewport">中添加），env()才会返回真实值
真正容易被忽略的是：H5 端的 toast 组件不响应页面滚动或 resize，一旦你用 uni.showLoading + uni.hideLoading 替代 toast，同样要对 .uni-loading 做相同处理——它们共享同一套样式注入机制。
