底部元素被遮挡需综合解决层叠上下文与定位问题：确保其为position: fixed、置于HTML末尾、z-index足够大且无父级触发新层叠上下文的属性（如transform、opacity<1），并注意iOS Safari兼容性。
底部元素被遮挡，通常不是 z-index 单独能解决的问题，而是层叠上下文（stacking context）和定位方式共同导致的。单纯加 z-index 往往无效，关键要先确保它处于正确的层叠层级中。
确认元素已脱离文档流并拥有层叠上下文
固定定位（position: fixed）本身会创建新的层叠上下文，但它的层级受父级影响。如果父容器设置了 transform、opacity < 1、will-change 或 filter 等属性，就会强制创建一个**新的、独立的层叠上下文**，此时子元素的 z-index 只在这个新上下文中生效，无法盖过外部其他 fixed 元素。
- 检查底部元素的任意上级容器是否含有
transform: translateZ(0)、opacity: 0.99、filter: blur(1px)等触发层叠上下文的样式，临时移除测试是否恢复正常 - 确保底部元素自身使用
position: fixed（而非absolute或relative），且bottom: 0、left: 0、right: 0等定位明确 - 给它显式设置
z-index: 1000（数值足够大，避开常见框架默认值如 10、99、100）
避免被同级 fixed 元素覆盖
多个 position: fixed 元素按 HTML 顺序层叠：后写的元素默认在前写的上方（前提是它们属于同一层叠上下文）。如果底部栏写在顶部导航之前，就可能被盖住。
- 把底部固定元素（如
<footer class="fixed-bottom">）放在 HTML 文档末尾，紧邻</body>前 - 统一管理全局 fixed 元素的
z-index值，例如：.header { z-index: 100; }<br>.modal { z-index: 1000; }<br>.fixed-bottom { z-index: 99; }
注意：这里.fixed-bottom的值必须比遮挡它的元素更小或更大——取决于你想让它在上还是下；若想“最上”，就设为最大
警惕移动端 Safari 的渲染异常
iOS Safari 对 fixed 定位有特殊行为，尤其在页面滚动、输入框聚焦或地址栏收放时，可能临时重排 fixed 元素位置，造成视觉遮挡或错位。
立即学习“前端免费学习笔记（深入）”；
- 添加
backface-visibility: hidden或transform: translateZ(0)到 fixed 底部元素，可强制启用硬件加速，提升渲染稳定性 - 避免在底部元素上使用
height: 100vh，改用min-height: 100vh或基于视口单位的弹性计算（如calc(100vh - 60px)） - 如有 Webview 或 Hybrid 场景，检查是否启用了「滚动到顶部时隐藏地址栏」等特性，必要时监听
scroll或resize事件微调top/bottom
快速验证与调试技巧
打开浏览器开发者工具，在 Elements 面板中选中底部元素，右侧 Styles 标签页里逐条禁用可能影响层叠的属性（尤其是 transform、opacity、filter），观察是否恢复显示。
- 在 Console 中运行
getComputedStyle(document.querySelector('.fixed-bottom')).position，确认确实是"fixed" - 用
getComputedStyle查看实际生效的z-index，排除 CSS 优先级或继承干扰 - 临时加
outline: 2px solid red查看元素是否真的渲染在页面上（只是被盖住），而非未定位或尺寸为 0
