z-index没效果最常见原因是元素未设置position（如仍为static），或父容器因opacity
z-index 为什么写了却没效果
最常见原因是元素没设 position，比如还留着默认的 position: static。这时候写 z-index: 999 完全被浏览器忽略——它不是“不起作用”，而是压根不进入层叠计算流程。
另一个高频陷阱是：父容器意外创建了新的层叠上下文。比如给一个卡片加了 opacity: 0.99 或 transform: translateY(0)，它立刻变成一个独立的“堆叠房间”，里面所有子元素的 z-index 只能在这个房间里比高低，再大也出不去。
- 检查目标元素的
Computed面板，看z-index是否显示为auto（说明未生效）或具体数值但被截断 - 临时删掉父级的
opacity、filter、transform等属性，确认是否恢复预期顺序 - 若必须保留这些视觉效果，可把需要高层级的元素（如 tooltip、cursor-follow）移到
body下直接挂载，绕开父级上下文
哪些 CSS 属性会创建新的 Stacking Context
层叠上下文不是手动“开启”的功能，而是由特定 CSS 属性值触发的隐式行为。一旦触发，它的子树就自成一套层叠体系。
以下任一条件满足，就会创建新上下文：
立即学习“前端免费学习笔记（深入）”；
-
position不是static且z-index是具体数字（非auto） -
opacity小于1 -
transform不是none -
filter不是none -
will-change包含transform、opacity等值 isolation: isolate
注意：z-index: auto 的定位元素不会创建新上下文；position: static 元素即使有 opacity: 0.5 也不会——必须同时满足“定位 + 触发属性”才成立。
如何安全地提升弹窗、tooltip 等浮层的层级
关键不是堆高数字，而是控制上下文归属。比如模态框被一个带 filter: blur(2px) 的背景遮住，不是因为 z-index 不够大，而是那个背景自己建了个上下文，把整个区域锁死了。
- 把浮层（如
#modal、.tooltip）的 DOM 节点直接插入到body底部，脱离可能带触发属性的祖先 - 统一用 CSS 自定义属性管理层级基线：
:root { --z-modal: 1000; --z-tooltip: 1050; }，避免散落的魔法数字 - 对必须嵌套在复杂容器里的浮层，检查其最近的已定位祖先是否创建了上下文——如果是，优先调高该祖先的
z-index，而不是子元素
调试时怎么看实际层叠关系
浏览器开发者工具里没有“层叠顺序”面板，但可以通过组合操作快速定位问题：
- 在
Elements面板选中目标元素，切换到Computed，搜索z-index，看它是auto还是具体值；再往上逐级点开父元素，观察谁的z-index变成了具体数字（意味着它创建了上下文） - Chrome DevTools 的
Rendering面板勾选Paint flashing，动画/重绘频繁的区域往往伴随隐式上下文 - 临时加
outline: 2px solid red到疑似“消失”的元素上，确认它是否真的被盖住，还是根本没渲染出来
真正难处理的永远不是 z-index 值本身，而是它被哪个祖先悄悄“收编”进了另一个上下文——那才是你得一层层往上翻 DOM 树去找的点。
