z-index 失效最常见原因是目标元素未设 position 或父容器创建了层叠上下文；需确保 position 非 static，且父元素未触发新层叠上下文（如 opacity、transform 等）。
z-index 为什么加了也不起作用
最常见的情况是：目标元素没设 position，或者被父容器“关进小房间”了。z-index 对 position: static 完全无效；而一旦父元素用了 opacity: 0.99、transform: scale(1)、filter: blur(0.5px) 或 will-change: transform，就会创建新的层叠上下文——子元素的 z-index 只能跟兄弟比，出不了这个父容器。
快速验证方法：
- 打开 Chrome DevTools → Elements → Computed → 搜索
stacking context，看祖先节点是否标着 “This element establishes a stacking context” - 临时删掉父级可疑样式（比如
opacity或transform），观察遮挡是否消失 - 把目标元素剪切出来，直接挂到
<body>下测试，确认是否真由上下文导致
position: relative 还是 absolute？选错会放大重叠问题
选哪个取决于你是否想让它脱离文档流。用 position: relative 最安全：不改变布局位置，但能激活 z-index；position: absolute 适合完全脱离流的浮层（如弹窗），但必须确保其最近的已定位祖先能提供合理参照。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
absolute时，父容器若设了overflow: hidden、auto或scroll，会直接裁剪子元素，z-index根本没机会起作用 - 别依赖“文档流顺序”赌谁在上——后写的
static元素可能盖住前写的absolute元素，这是不可控的 fallback 行为 - 只要是为了控制层级，优先加
position: relative，它不扰动布局，又解锁z-index
缩放（Ctrl+/-）时定位元素突然重叠怎么办
本质是固定像素值（如 top: 20px、transform: translate(10px, 10px)）不随缩放动态调整。媒体查询对浏览器缩放事件无感知，写再多 @media (max-zoom: 1.25) 都无效。
真正可用的适配方式：
- 优先用
position: relative+margin替代absolute偏移：相对定位元素仍在文档流中，缩放时margin和自身尺寸同比例缩放，相对位置更稳定 - 避免
top/left，改用inset+calc()：比如inset: 1rem auto auto 1rem比top: 16px; left: 16px更适应字体缩放 - 对必须用
transform的浮层（如 tooltip），用scale()替代translate()做微调，视觉一致性更好
sticky 元素“透出”下方文字，其实是背景没封住
这不是定位或 z-index 问题，而是视觉错觉：position: sticky 元素用了半透明背景（如 rgba(255, 255, 255, 0.9)），下面的内容又没设不透明背景，滚动时文字就从边缘“露头”。
修复要点：
- 必须同时给 sticky 元素及其**紧邻的下一个同级块级元素**设不透明背景，例如
#main-content { background: #fff; } - 别用
background: inherit——它会继承父级可能带透明度的背景 - 移动端 Safari（尤其 15.4+）有瞬时渲染漏光，可加
backface-visibility: hidden强制合成层，或在外层再包一层position: relative容器
复杂点在于，背景“漏光”往往和 z-index 层级、父容器 overflow、甚至字体抗锯齿精度耦合。先封住背景，再调层级，最后看滚动行为。
