z-index设再大也盖不住，根本原因是元素未定位（position为static）或被父级堆叠上下文隔离；必须确保position为relative/absolute/fixed/sticky，并检查opacity、transform、filter等是否隐式创建新堆叠上下文。
z-index设再大也盖不住，根本不是数值问题，而是元素没进层叠计算，或者被父级“关进小房间”了。
目标元素的position是不是static？
浏览器直接忽略z-index，只要position是static（默认值）。这不是“效果差”，是压根不参与z轴排序。
- 打开 Chrome DevTools → 选中被遮挡元素 → «Computed» 面板搜
position，确认不是static - 临时加
position: relative（不位移、不影响布局），看遮挡是否立刻消失 -
display: flex或grid的子项能用z-index，但前提是它自己有position值，不能靠父容器“带进去” - JS 动态插入时容易只改
z-index，漏掉同步设position
哪个父级在悄悄创建堆叠上下文？
子元素的 z-index 再高，也出不去它直属的堆叠上下文。真正拦住你的，往往是一个加了 opacity: 0.999 或 transform: translateZ(0) 的父 div。
- 选中被遮挡元素 → «Layout» 标签页看
Stacking context是否为Yes - 逐级点父节点，在 «Computed» 里搜
opacity、transform、filter、will-change、isolation—— 任意一个非默认值，就是源头 - 特别注意：
overflow: hidden+position: relative（哪怕z-index: auto）也会强制创建堆叠上下文，且还会裁掉内容 -
z-index: 0和z-index: auto效果完全不同：前者只要已定位，就创建新上下文；后者不会
该调谁的z-index才真正有效？
别只狂堆子元素的数字。如果父容器已经建了“结界”，子元素的 z-index: 9999 只是在它内部当老大，对外无效。
- 真正要调的是那个“关住它”的父容器本身的
z-index（比如设成1050） - 如果父容器加
transform是为了过渡动画，且可删，直接移除比堆数字干净十倍 - 必须保留视觉效果时，给该父容器加
position: relative+ 合理z-index，而不是只修子元素 - 对
modal、tooltip类组件，更彻底的解法是用Portal（React）或Teleport（Vue）把元素挂到下，绕开所有祖先上下文
最常被忽略的复杂点是：页面里可能嵌套多层堆叠上下文，而 DevTools 的 «Layout» 面板只显示当前元素是否在上下文中，不自动指出“上一级是谁”。得手动逐层点上去查，漏一层就修不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
