z-index 失效主因是父元素创建了堆叠上下文，而非数值不足；需确认元素已定位（position≠static），并检查 transform、opacity 等隐式触发属性，调整“结界”父容器的 z-index 或移除其创建上下文的样式。
z-index 设再大也盖不住，基本不是数值问题，而是你正被某个父元素创建的堆叠上下文“锁”在局部范围内了。
检查目标元素是否满足 z-index 生效前提
z-index 不是万能开关，它只对已定位元素起作用。如果 position 还是 static（默认值），浏览器直接忽略你的 z-index 值。
- 打开 Chrome DevTools，选中元素，在 «Computed» 面板搜
position，确认不是static - 临时加一行
position: relative（几乎不影响布局），看遮挡是否立刻消失 - 注意：flex 或 grid 子项即使没写
position，也能用z-index，但仅限该容器内部生效，且仍受祖先堆叠上下文限制
快速定位哪个父级在创建堆叠上下文
堆叠上下文往往藏在 DOM 上方几层，不往上翻就永远修不对。别猜，用 DevTools 直接看：
- 选中被遮挡元素 → 右侧面板切换到 «Layout» 标签页 → 留意
Stacking context是否显示为Yes - 或打开 «Rendering» 面板 → 勾选
Show layers panel→ 在 «Layers» 面板里找带分组边界的节点，点它就能高亮对应 DOM - 逐级点击父节点，在 «Computed» 里搜
transform、opacity、filter、will-change—— 任意一个值非默认，就可能是“结界源头”
哪些属性会无声创建堆叠上下文
这些样式看着只是加点动效或透明，实则一加就截断层级链：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于 1（哪怕opacity: 0.999） -
transform不是none（包括transform: translateZ(0)、scale(1)、rotate(0)） -
filter不是none（哪怕filter: blur(0)或filter: opacity(1)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky且z-index不是auto - flex/grid 容器中，子项设置了
z-index（非auto） - 特别注意：
z-index: 0和z-index: auto效果不同——前者只要元素已定位，就会创建新上下文；后者不会
修复时调谁的 z-index 才有效
子元素的 z-index 再高也没用，它出不去父级上下文。真正要调的是那个“关住它”的父容器本身的 z-index 值。
- 如果父容器加
transform是为了过渡动画，且可删，直接移除比堆数字干净十倍 - 如果必须保留（如淡入/模糊），就给该父容器本身设
position: relative+ 合理z-index（比如z-index: 1050），而不是只给子元素狂设9999 - 对 modal / tooltip 类组件，更彻底的解法是用
createPortal（React）或Teleport（Vue）挂到document.body下，完全脱离干扰上下文
最常被忽略的点是：z-index 不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想加个 9999 前，先往上点三下 DevTools —— 那个突然标红的 Stacking context: Yes 才是你该修的地方。
