为什么CSS中父元素设置了opacity会影响子元素的z-index？

opacity指不透明度，是CSS中用于设置元素整体透明程度的属性，取值范围为0.0（完全透明）至1.0（完全不透明），影响元素及其所有子元素的可见性。

opacity

只要父元素的 opacity 小于 1（哪怕只是 opacity: 0.999），它就会成为一个新的层叠上下文（stacking context）边界。这不是 bug，是 CSS 规范明确要求的行为。

这意味着：子元素的 z-index 只在该父元素内部起作用；它无法“跨出去”和外部同级元素比高低；整个父容器作为一个整体，按其自身在父级上下文中的层级参与排序。

常见误判场景：
– 给弹窗外层加了 opacity: 0.95 做淡入效果
– 弹窗内部按钮设了 z-index: 9999
– 结果按钮仍被顶部导航栏盖住——因为两者根本不在同一个层叠上下文中

怎么快速确认是不是 opacity 搞的鬼

打开 Chrome DevTools，选中疑似问题的父元素，在右侧面板 «Computed» 标签下搜索 Stacking context：

• 如果显示 This element establishes a stacking context，就是它
• 临时注释掉该元素的 opacity 声明，看遮挡是否立刻消失
• 用 «Layers» 面板（More Tools → Layers）可直观看到渲染树里的上下文分组

注意：opacity: 1 和 opacity: 0.999 的行为天差地别——前者不触发上下文，后者一定触发。

立即学习“前端免费学习笔记（深入）”；

替代方案：用 rgba() / hsla() 实现局部透明

想让背景或文字半透，又不想破坏 z-index 流，就别碰父级 opacity：

• background-color: rgba(0, 0, 0, 0.5) —— 半透背景，不影响子元素层叠
• color: hsla(200, 100%, 50%, 0.7) —— 半透文字色，不触发上下文
• 避免对整个容器设 opacity 再靠子元素 opacity: 1 补救——无效，透明度已继承且不可逆

必须用 opacity 时该怎么处理

如果动画、蒙版等场景确实绕不开 opacity，就别只调子元素 z-index：

• 把需要“突围”的元素（如 tooltip、dropdown）用 JS 移到 document.body 下，脱离原上下文
• 给触发上下文的父容器自身设高 z-index（比如 z-index: 1050），而不是堆子元素数值
• 动画中避免 opacity 落入 (0, 1) 开区间——过渡全程用 opacity: 1 → opacity: 0 整数端点
• 多个交互层共存时，确保它们处于同一层叠上下文，否则 z-index 数值再大也无意义

真正难的不是写多少个 9，而是意识到 z-index 是相对值，它被包裹在层层嵌套的上下文里——每次失效，都得往上查，而不是往子元素里钻。