opacity小于1会强制创建层叠上下文，使button的z-index仅在内部生效；未定位元素加opacity后因获得更高层级的上下文而“浮起”，应改用rgba()/hsla()实现局部透明。
opacity
只要 opacity 值小于 1（哪怕 opacity: 0.999），浏览器就必须为该元素创建新的层叠上下文（stacking context）。这不是某个浏览器的实现偏差，而是 CSS Compositing and Blending Level 1 规范明文规定的触发条件之一。
这意味着：该元素及其所有后代被“隔离”进一个独立的渲染单元，z-index 只在这个内部起作用；它和兄弟元素的层叠顺序，只由它自身在父级中的“整体层级”决定，而不是靠子元素的 z-index 去争。
常见误判：div.overlay { opacity: 0.8; } > button { z-index: 9999; } —— 这个 button 的 z-index 根本不参与和外部导航栏、弹窗等元素的比较，它只管自己有没有兄弟要盖住。
为什么没设 position 的元素加了 opacity 反而“浮上来”了？
普通文档流中两个块级元素重叠时，后写的 HTML 默认在上层。但一旦给前面那个加了 opacity: 0.9，它就立刻获得一个隐式层叠上下文，而这个上下文的“默认层级权重”高于未定位的静态元素。
- 它不是变“高”，是变“独立”——就像从平房搬进了带门禁的公寓楼，整栋楼在街区里排位比隔壁平房高
- 验证方式：给后面那个元素加
position: relative和任意z-index（比如z-index: 1），它立刻压回去 - 或者给后面那个也加
opacity: 0.7，这时又回归“谁 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补救——无效，透明度已继承且无法被覆盖
如果必须用 opacity（比如做淡入动画），确保所有参与同一层叠关系的兄弟元素都处于同一类上下文：要么全用 rgba，要么全都带 opacity 并统一管理它们的父级定位与 z-index。
调试 z-index 失效时，第一眼该看什么？
遇到 z-index “不生效”，别急着改数值，先查这三项：
- 目标元素是否设置了
position（relative/absolute/fixed/sticky）？没有则z-index直接忽略 - 它的任意祖先（不一定是父级）是否设置了
opacity 、transform、filter或will-change？这些都会提前截断层叠链 - 用 Chrome DevTools 选中该元素，在 «Computed» 面板搜
Stacking context，显示Yes就是它
真正难处理的不是 opacity 本身，而是它常和其他属性（比如 transform: translateZ(0)）一起被无意识叠加使用，导致层叠上下文嵌套多层，排查路径变长。每次加视觉效果前，先问一句：这个属性会不会悄悄建“结界”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
