底部元素被遮挡需综合解决层叠上下文与定位问题：确保其为position: fixed、置于HTML末尾、z-index足够大且无父级触发新层叠上下文的属性（如transform、opacity

底部元素被遮挡，通常不是 z-index 单独能解决的问题，而是层叠上下文（stacking context）和定位方式共同导致的。单纯加 z-index 往往无效，关键要先确保它处于正确的层叠层级中。

确认元素已脱离文档流并拥有层叠上下文

固定定位（position: fixed）本身会创建新的层叠上下文，但它的层级受父级影响。如果父容器设置了 transform、opacity 、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 顺序层叠：后写的元素默认在前写的上方（前提是它们属于同一层叠上下文）。如果底部栏写在顶部导航之前，就可能被盖住。

• 把底部固定元素（如 ）放在 HTML 文档末尾，紧邻