opacity是css中用于控制元素及其所有子元素整体透明度的属性，取值范围为0（完全透明）到1（完全不透明），常用于淡入淡出、视觉层次构建及动画过渡。
opacity
只要父元素的 opacity 计算值小于 1（哪怕只是 opacity: 0.999），浏览器就必须为其创建一个新的层叠上下文（stacking context）。这个规则写在 CSS Compositing and Blending Level 1 规范里，所有现代浏览器都严格遵循。它不取决于你是否加了 position 或 z-index，也不看子元素有没有设 z-index——只要透明度不是完全不透明，上下文就成立。
为什么子元素 z-index 看似“失效”了
新层叠上下文会把整个子树“隔离”起来：
- 子元素的
z-index只在该父容器内部起作用，无法和外部同级元素比高低 - 即使子元素写了
z-index: 9999，它也只决定“在父盒子内部谁在上”，而整个父盒子作为一个整体，按它自身的层叠权重参与外部排序 - 如果父盒子没设
z-index（即默认z-index: auto），那它在外部层叠顺序中等价于z-index: 0，很可能被其他有明确z-index的兄弟元素压住
怎么快速确认是不是 opacity 搞的鬼
打开 Chrome DevTools，选中疑似问题的父元素：
- 在右侧面板 «Computed» 标签下搜索
Stacking context，若显示This element establishes a stacking context，就是它 - 临时注释掉该元素的
opacity声明，刷新页面看遮挡是否立刻消失 - 打开 «More Tools → Layers» 面板，勾选
Paint flashing，能直观看到渲染树里的上下文分组边界
替代方案：想透明又不想破坏 z-index，就别碰父级 opacity
用颜色函数实现局部透明，是最干净的解法：
- 背景半透？改用
background-color: rgba(0, 0, 0, 0.5)—— 子元素完全不受影响 - 文字带透明？用
color: hsla(200, 100%, 50%, 0.7)—— 不触发上下文，也不影响布局 - 绝对不要对容器设
opacity: 0.5再给子元素补opacity: 1，无效：透明度是乘法叠加，且上下文已建立
真正难处理的不是数值本身，而是它悄无声息地把整个子树“封进”一个新空间——调试时得一层层往上查父级，而不是只盯着子元素的 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
