opacity 小于 1 会强制创建新的层叠上下文，这不是 bug，是 css 规范行为——它直接改写 z-index 的作用范围，必须用其他方式绕过。
opacity 小于 1 会强制创建新的层叠上下文，这不是 bug，是 CSS 规范行为——它直接改写 z-index 的作用范围，必须用其他方式绕过。
为什么 opacity: 0.99 会让 z-index “失效”
只要 opacity 值小于 1（哪怕 opacity: 0.999），浏览器就会为该元素创建一个独立的层叠上下文。这意味着：
- 它的子元素
z-index只在它内部生效，无法盖住同级兄弟元素 - 即使子元素设了
z-index: 9999，也出不了这个“透明盒子”的边界 - 没设
position的普通流元素，一旦加了opacity，会因隐式获得更高层叠权重而“浮上来”，看起来像 z-index 生效了，其实只是上下文层级变了
用 rgba() / hsla() 替代 opacity 实现局部透明
想让背景半透但文字清晰、不破坏层叠链？直接换颜色函数：
-
background-color: rgba(255, 255, 255, 0.8)—— 背景透明，子元素完全不受影响 -
color: hsla(200, 100%, 50%, 0.7)—— 文字带透明度，不影响布局或堆叠顺序 - 避免对容器设
opacity: 0.5再给子元素补opacity: 1，无效：透明度已继承且不可逆
调试 z-index 失效时必须检查的三项
遇到“调了 z-index 还盖不住”，别只盯着数值，先确认：
- 目标元素是否设置了
position: relative、absolute或fixed？没设则z-index完全无效 - 它的任意父级是否用了
opacity 、<code>transform、filter或will-change？这些都会提前截断层叠链 - 两个对比元素是否处于同一层叠上下文？用 Chrome DevTools 的「Layers」面板勾选「Paint flashing」能快速识别上下文边界
必须用 opacity 时的兼容策略
如果动画、渐变过渡等场景非用 opacity 不可，就统一上下文：
- 所有参与层叠的兄弟元素，要么全都加
opacity（比如都设opacity: 0.8），要么全都用rgba() - 不要混用：一个用
opacity，另一个靠z-index硬压，大概率失败 - 真正难处理的不是
opacity本身，而是它悄无声息地把整个子树“隔离”进新上下文——这点最容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
