z-index设了但盖不住底部元素，根本原因是目标元素未定位或被祖先层叠上下文隔离；必须确保position非static，并检查opacity、transform等属性是否意外创建了限制子元素层级的“玻璃罩”。
z-index 设了但盖不住底部元素，基本可以断定：目标元素没进对的层叠上下文，或者它被某个祖先“关”在了一个低层级的“玻璃罩”里。单纯调高 z-index 值几乎没用。
检查目标元素是否具备定位前提
z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效；position: static（默认）时，z-index 完全被忽略。
- 打开开发者工具，选中被遮挡的元素，在 «Computed» 面板确认
position值不是static - 若只是想让它浮起，最轻量写法是：
position: relative; z-index: 100;（无需位移） - 别给所有元素统一加
position: relative——可能意外触发层叠上下文或干扰布局
排查父级是否静默创建了层叠上下文
这是最常被忽略的根源。只要某个祖先元素设置了以下任一属性，就会创建新层叠上下文，把子元素的 z-index “锁死”在内部：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括看似无害的transform: translateZ(0)、scale(1)） -
filter不为none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate
用 Chrome DevTools 的 «Layers» 面板直接查看哪些节点标为 “Stacking context: Yes”，逐级向上点父节点验证。
确认底部元素自身是否处于独立层叠上下文
很多底部栏用 position: fixed，但它若被包裹在某个带 transform 的容器里（比如一个动画卡片），那它的 z-index 就只在该卡片内部有效，永远盖不过同级的其他 fixed 元素。
- 把底部元素（如
<footer class="fixed-bottom"></footer>）直接放在末尾，避开任何可疑父容器 - 确保它自身有明确
position: fixed+bottom: 0+ 足够大的z-index（例如z-index: 9999） - 如果必须保留在某容器内，就把该容器整体设高
z-index，而不是只调子元素
iOS Safari 下 fixed 元素的渲染抖动
即使层级逻辑正确，iOS Safari 在地址栏收放、软键盘弹出、页面滚动时，会临时重排 position: fixed 元素位置，造成视觉遮挡或错位。
- 给底部元素加
backface-visibility: hidden或transform: translateZ(0)，强制启用硬件加速（注意：这本身会创建层叠上下文，需同步检查父级） - 避免用
height: 100vh，改用min-height: 100vh或calc(100vh - 60px)防止视口高度突变 - Hybrid 场景下，留意 WebView 是否启用了「滚动时隐藏地址栏」特性，必要时监听
scroll或resize微调bottom
真正卡住问题的，往往不是 z-index 值不够大，而是你没意识到自己正在两个互不相通的“层叠世界”里分别调数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
