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 是相对值，它被包裹在层层嵌套的上下文里——每次失效，都得往上查，而不是往子元素里钻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
