opacity小于1会强制创建新的层叠上下文，使子元素z-index仅在该上下文中生效，无法覆盖外部同级元素；应改用rgba()/hsla()实现局部透明。
opacity 小于 1 会强制创建新的层叠上下文
这不是 bug，是 CSS 规范明确规定的：只要元素的 opacity 值小于 1（哪怕只是 0.999），它就会成为一个「层叠上下文边界」。这意味着：
- 该元素及其所有子元素被“框进”一个独立的层叠环境里，
z-index只在这个内部起作用 - 它的层叠顺序不再直接和兄弟元素比大小，而是作为一个整体参与父级层叠排序
- 即使子元素设置了
z-index: 9999，也无法突破父级opacity创建的上下文去盖住外部同级元素
为什么没设 position 的元素加了 opacity 反而“变高了”
当两个普通块级元素（未设 position）重叠时，后写的 HTML 元素默认在上层。但一旦给前面那个元素加上 opacity: 0.9，它就立刻获得了一个隐式层叠上下文 —— 而这个上下文的“层级权重”高于普通流内元素，导致它视觉上“浮”到后面那个无定位元素之上。
这容易让人误以为 opacity 提升了 z-index，其实只是它抢先进入了更高一级的层叠层级。验证方式很简单：
- 给后面那个元素也加
position: relative和任意z-index（比如1），它立刻就能压回去 - 或者给后面那个元素也加
opacity: 0.8，这时又回归“谁 opacity 更小谁在上”的隐式规则
想局部透明又不破坏 z-index，该用什么替代 opacity
用 rgba() 或 hsla() 替代 opacity 是最直接的解法，因为它们只作用于单个颜色属性，不触发层叠上下文：
-
background-color: rgba(0, 0, 0, 0.5)—— 半透背景，文字、边框、子元素全保持 100% 不透明 -
color: hsla(200, 100%, 50%, 0.7)—— 半透文字色，不影响布局或堆叠 - 避免对整个容器设
opacity再靠子元素opacity: 1补救 —— 这无效，透明度已继承且无法被子元素覆盖
z-index + opacity 同时存在时，调试的关键检查点
遇到 z-index “失效”，先别急着调数值，重点排查这几项：
- 目标元素是否设置了
position（relative/absolute/fixed）？没有则z-index直接忽略 - 它的任意父级是否设置了
opacity 、<code>transform、filter或will-change？这些都会提前截断层叠链 - 对比的两个元素是否处于同一层叠上下文？用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」能快速识别上下文边界
- 如果必须用
opacity，确保所有参与层叠的兄弟元素都处于同一类上下文（比如全都带opacity，或全都用rgba）
z-index，就像在隔壁房间喊话，对面根本听不见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
