opacity 小于 1 会强制创建新的堆叠上下文，使子元素 z-index 仅在该上下文内生效，无法与外部同级元素比较层级；常见触发条件包括 opacity: 0.99、transform: translatez(0)、filter 等。
opacity 小于 1 会强制创建新的堆叠上下文
只要一个定位元素（position 不为 static）设置了 opacity 值小于 1，它就会成为一个独立的堆叠上下文（stacking context），其内部所有子元素的 z-index 只在该上下文内生效，无法与外部同级元素直接比大小。
这意味着：即使你给子元素设了 z-index: 9999，只要它的父容器有 opacity: 0.99，它就永远盖不过同级另一个没设 opacity、但 z-index: 2 的兄弟元素。
- 常见触发条件包括：
opacity: 0.99、opacity: 0.5、甚至opacity: 0.999—— 只要不是精确的1就会触发 -
transform: translateZ(0)、filter: blur(0)、will-change: opacity等也会产生同样效果，常被忽略 - 用 Chrome DevTools 的
Layers面板或在Computed标签页里搜索stacking context，能一眼看出是否意外创建
为什么加了 opacity 的元素总“盖在上面”
当两个普通块级元素（都未设置 position）重叠时，DOM 后序渲染的元素自然在上层；一旦其中某个加了 opacity: 0.99，它就跃升为一个“局部顶层”，哪怕它在 HTML 中写在前面，视觉上也会压住后面没设 opacity 的元素。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
这不是 bug，是 CSS 规范定义的行为：创建堆叠上下文的元素，在其父级堆叠顺序中占据一个独立层级，且默认层级高于未创建上下文的同级元素。
- 实验验证：给
#a加opacity: 0.9，#b和#c保持默认，#a就会挡住后两者，哪怕它在 DOM 中最先出现 - 修复方式不是调高
z-index，而是让所有参与比较的元素处于同一堆叠上下文，或统一创建上下文再比z-index - 如果必须用透明度又不想影响层级，改用
background-color: rgba(0,0,0,0.5)替代opacity，它不触发新上下文
z-index 和 opacity 混用时的动画陷阱
做轮播图或模态框淡入动画时，常同时操作 opacity 和 z-index：先提 z-index 再渐显 opacity。但如果 z-index 改变和 opacity 动画不同步（比如用 transition 但没设 z-index 的过渡），会出现“闪一下被遮挡”的现象。
-
z-index是离散值，不支持 CSS 过渡，不能写transition: z-index 0.3s—— 浏览器会忽略这行 - 正确做法：用
transform: scale(1)或will-change: transform提前创建上下文，再配合opacity+ 类切换控制显示/隐藏 - 若需动态置顶，JavaScript 中应先设置
z-index，再加类触发动画，避免帧率错位
如何安全地用 opacity 实现透明又不破坏层级
核心原则是：让需要相互比较层级的元素，要么都不创建堆叠上下文，要么都在同一个上下文里竞争。
- 最稳妥：所有相关元素统一设
position: relative+ 显式z-index，且全部避免opacity 、<code>transform、filter等触发器 - 次选方案：主动给所有兄弟容器都加上
opacity: 0.999（或transform: translateZ(0)），使它们处于同一级上下文，再靠z-index排序 - 替代方案：用
rgba()控制背景透明、hsla()控制文字颜色透明，这些不影响堆叠上下文 - 特别注意：
opacity会继承，父设0.8，子设1渲染出来仍是0.8—— 如需子元素完全不透明，必须把父子拆成兄弟 + 绝对定位模拟嵌套
z-index 数值，先打开 DevTools 看一眼“谁悄悄建了墙”。堆叠上下文不是开关，是隐形结构，一不留神就卡住整个层级逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
