z-index 失效主因是父元素创建了堆叠上下文，而非数值不足；需确认元素已定位（position≠static），并检查 transform、opacity 等隐式触发属性，调整“结界”父容器的 z-index 或移除其创建上下文的样式。
z-index 设再大也盖不住，基本不是数值问题，而是你正被某个父元素创建的堆叠上下文“锁”在局部范围内了。
检查目标元素是否满足 z-index 生效前提
z-index 不是万能开关，它只对已定位元素起作用。如果
还是
（默认值），浏览器直接忽略你的
值。
打开 Chrome DevTools，选中元素，在 «Computed» 面板搜
，确认不是
临时加一行
（几乎不影响布局），看遮挡是否立刻消失
注意：flex 或 grid 子项即使没写
，也能用
，但仅限该容器内部生效，且仍受祖先堆叠上下文限制
快速定位哪个父级在创建堆叠上下文
堆叠上下文往往藏在 DOM 上方几层，不往上翻就永远修不对。别猜，用 DevTools 直接看：
选中被遮挡元素 → 右侧面板切换到 «Layout» 标签页 → 留意
是否显示为
或打开 «Rendering» 面板 → 勾选
→ 在 «Layers» 面板里找带分组边界的节点，点它就能高亮对应 DOM
逐级点击父节点，在 «Computed» 里搜
、
、
、
—— 任意一个值非默认，就可能是“结界源头”
哪些属性会无声创建堆叠上下文
这些样式看着只是加点动效或透明，实则一加就截断层级链：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
小于 1（哪怕
）
不是
（包括
、
、
）
不是
（哪怕
或
）
或
或
且
不是
flex/grid 容器中，子项设置了
（非
）
特别注意：
和
效果不同——前者只要元素已定位，就会创建新上下文；后者不会
修复时调谁的 z-index 才有效
子元素的
再高也没用，它出不去父级上下文。真正要调的是那个“关住它”的父容器本身的
值。
如果父容器加
是为了过渡动画，且可删，直接移除比堆数字干净十倍
如果必须保留（如淡入/模糊），就给该父容器本身设
+ 合理
（比如
），而不是只给子元素狂设
对 modal / tooltip 类组件，更彻底的解法是用
（React）或
（Vue）挂到
下，完全脱离干扰上下文
最常被忽略的点是：z-index 不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想加个 9999 前，先往上点三下 DevTools —— 那个突然标红的
才是你该修的地方。
positionstaticz-indexpositionstaticposition: relativepositionz-indexStacking contextYesShow layers paneltransformopacityfilterwill-changeopacityopacity: 0.999transformnonetransform: translateZ(0)scale(1)rotate(0)filternonefilter: blur(0)filter: opacity(1)will-change: transformwill-change: opacityisolation: isolateposition: fixedstickyz-indexautoz-indexautoz-index: 0z-index: autoz-indexz-indextransformposition: relativez-indexz-index: 10509999createPortalTeleportdocument.bodyStacking context: Yes