z-index失效根本不是数值问题，而是元素被父级堆叠上下文隔离；需确认position非static，逐级排查opacity
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 - 特别注意：
z-index: 0和z-index: auto效果不同——前者只要元素已定位，就会创建新上下文；后者不会
修复时调谁的 z-index 才有效
子元素的 z-index 再高也没用，它出不去父级上下文。真正要调的是那个“关住它”的父容器本身的 z-index 值。
- 如果父容器加
transform是为了过渡动画，且可删，直接移除比堆数字干净十倍 - 如果必须保留（如淡入/模糊），就给该父容器本身设
position: relative+ 合理z-index（比如z-index: 1050），而不是只给子元素狂设9999 - 对
modal/tooltip类组件，更彻底的解法是用Portal把元素挂到下，绕开所有祖先上下文
z-index 的数值比较只在最近的共同祖先上下文内发生。最容易被忽略的是那些“看起来无害”的属性——比如 opacity: 0.99 或 will-change: transform，它们不会报错，也不会改变视觉，却悄悄把整个子树关进一个独立的 Z 轴牢笼里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
