z-index失效主因是父级创建了层叠上下文，子元素被限制在该上下文中；需检查定位属性、查找创建上下文的祖先元素，并调整其z-index或移除触发属性。
z-index被父级限制，不是值设得不够大，而是子元素被锁进了父级创建的层叠上下文（stacking context）里——它再高也出不去那个“房间”。
确认目标元素是否已定位
z-index只对position为relative、absolute、fixed或sticky的元素生效。如果仍是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的数值比较只在最内层上下文里发生——你看到的“被盖住”，其实是两套独立排序系统在各自房间里比大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
