z-index失效的根本原因是层叠上下文限制和脱离文档流引发的布局问题，需通过devtools定位创建层叠上下文的祖先节点、调整父级样式或修改定位方式来解决。
z-index设了为啥还是被盖住
因为z-index只在同一个层叠上下文（stacking context）里起作用，不是全局排序。你给子元素设z-index: 9999，但它的父级用了opacity: 0.99、transform: translateZ(0)、filter: blur(1px)或will-change: transform，就会创建新层叠上下文——子元素的z-index就被“锁死”在父级内部，根本出不去。
常见现象：
- 开发者工具里看到元素的z-index计算值是auto
- 被遮挡元素明明z-index: 20，遮挡它的元素只有z-index: 10，却仍被盖
- 删掉父级一行filter: blur(1px)，遮挡立刻消失
实操建议：
- 打开 Chrome DevTools，选中被遮挡元素，在右侧面板Computed里搜stacking context，找到第一个标有“This element establishes a stacking context”的祖先节点，就是问题源头
- 临时删掉父级的opacity、filter、transform、will-change等样式，验证是否恢复
- 不要对父级滥用will-change: transform，它比transform更容易隐式创建层叠上下文
fixed/absolute元素被父容器裁剪
这不是z-index问题，而是overflow: hidden（或auto、scroll）直接裁剪脱离文档流的子元素。裁剪发生在绘制前，层叠顺序还没开始算。
常见场景：
- position: fixed弹窗嵌在overflow: hidden的卡片里，只显示一半
- position: absolute下拉菜单被父级overflow: auto滚动容器截断
实操建议：
- 把fixed或absolute元素移出该父容器，挂到下
- 若必须保留在原结构中，改用position: sticky（兼容性已足够好），或给父容器加overflow: visible（注意可能影响其他布局）
- 避免在父级上同时设position: relative和overflow: hidden，除非你明确知道子元素不会逃逸
fixed导航栏盖住下面的内容
这是脱离文档流导致的布局逻辑问题，不是层级问题。浏览器渲染时，<section></section>从视口顶部开始布局，而position: fixed的导航栏不占空间，自然重叠。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 给首个非fixed内容块（如<section></section>）加margin-top，值≈导航栏实际高度（含padding、border）
- 导航栏高度不固定时，用scroll-margin-top配合锚点跳转（:target）做偏移，或用 JS 动态更新margin-top
- 更现代的做法：用display: flex或grid把导航栏和主内容封装在同一容器里，避免依赖fixed——比如header设position: sticky，父容器设min-height: 100vh
移动端fixed按钮被输入法顶起来
iOS 和安卓对软键盘弹出时fixed定位的处理完全不同：iOS 压缩visualViewport但fixed仍按原始window.innerHeight定位；安卓 WebView 行为碎片化。靠bottom: 0 + z-index完全无效。
实操建议：
- iOS 16.4+ 用bottom: env(keyboard-inset-bottom, 0px)，必须搭配@supports (bottom: env(keyboard-inset-bottom))降级
- 安卓及旧版 iOS：给最外层内容容器（如#app）加padding-bottom预留空间，值≈按钮高度
- 优先考虑position: sticky替代fixed，尤其适用于聊天输入框、评论区等紧贴内容底部的场景
- JS 必须兜底：监听focusin/blur事件，动态调整padding-bottom或滚动位置
真正卡住人的从来不是z-index数值大小，而是哪一层父级悄悄建了“墙”，以及脱离文档流后谁该为谁让出空间。调试时先看Computed里的stacking context和position，再动z-index——否则只是往迷雾里堆数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
