层叠上下文会在opacity
什么情况下会意外创建层叠上下文
不是只有 z-index 能影响层级，很多 CSS 属性一旦设了非默认值，就会悄悄创建新的层叠上下文——它像一层“玻璃罩”，把内部元素的 z-index 关在里面，再大也压不跨外面的兄弟元素。
常见触发点包括：
• opacity 小于 1（比如 opacity: 0.99）
• transform 不是 none（哪怕只是 transform: translateZ(0)）
立即学习“前端免费学习笔记（深入）”；
• filter 有值（如 filter: blur(1px)）
• will-change 设为 transform、opacity 等
• isolation: isolate
• position: fixed 或 sticky（在部分浏览器中）
这些属性本身和“堆叠”无关，但浏览器为了实现渲染优化，强制它们生成独立层叠上下文。你调 z-index: 9999 没用，是因为它只在自己的上下文里最大，跨不出去。
怎么快速定位哪个元素偷偷建了层叠上下文
靠肉眼或开发者工具的“Layers”面板太慢，真正快的方法是：在 DevTools 的 Styles 面板里，对疑似元素逐个关闭上面那几类属性，看层级是否突然恢复正常——尤其是先关 opacity 和 transform，它们最常背锅。
更直接的判断方式：
• 打开 Chrome DevTools → More Tools → Rendering → 勾选 “Paint flashing” 和 “Layer borders”
• 如果某个区域边缘出现绿色描边，说明它被提升为独立图层，大概率已形成层叠上下文
• 注意：绿色边框 ≠ 一定有问题，但和预期层级不符时，优先查它
别信“我只用了 z-index”，很多动画库（比如 Framer Motion、AOS）默认加 transform 或 opacity，一用就埋雷。
z-index 失效却没报错，怎么办
失效不是 bug，是规则生效了。关键看两个元素是否处于同一层叠上下文：
• 如果 A 和 B 是同级元素，且都没创建新上下文，那 z-index 直接比大小
• 如果 A 创建了上下文（比如加了 opacity: 0.99），而 B 没有，那 A 整体（包括它的所有子元素）都只能跟 B 在父级上下文中比——此时 A 内部再大的 z-index 也无效
典型错误写法：
.modal {
position: relative;
z-index: 1000;
}
.modal::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: -1; /* 这里无效！因为 fixed 触发新上下文，-1 只在 modal 内部起作用 */
}修复思路：要么让遮罩和弹窗平级（移出 .modal），要么干脆不用 z-index 控制遮罩，改用 backdrop-filter 或原生 ::backdrop（如果用的是 <dialog></dialog>）。
想稳控层级，哪些做法实际有效
别硬刚层叠上下文，绕开比对抗更可靠：
• 把需要高层级的元素提到 DOM 更上层（比如挂到 body 下），避开中间任何可能创建上下文的父容器
• 用 position: fixed 替代 relative + z-index（注意滚动兼容性）
• 对动画元素，优先用 transform: translateZ(0) 而不是 opacity 触发硬件加速——它虽也建上下文，但副作用更可控
• 使用 contain: paint 显式隔离渲染区域，反而能避免意外继承父级上下文
最常被忽略的一点：父容器的 z-index 值只要不是 auto，就会创建层叠上下文。所以哪怕你只给一个 div 加了 z-index: 1，它下面所有子元素的层级逻辑就变了——这个“1”不是起点，是边界。
