硬件加速会静默创建层叠上下文和合成层，使z-index作用范围受限于父容器；触发条件包括transform非none、opacity
硬件加速本身不破坏层级逻辑，但会静默创建新的层叠上下文（stacking context）和合成层（compositing layer），让原本该相对于 viewport 定位的元素被“锁进”局部坐标系——这不是 bug，是规范行为，只是多数人没意识到触发条件有多轻。
哪些 CSS 属性会意外创建层叠上下文？
只要父容器满足以下任一条件，其子元素的 z-index 就只能在该容器内部比高低，无法穿透到外部兄弟元素：
-
transform值不是none（包括translateZ(0)、scale(1)、rotate(0deg)） -
opacity小于1（哪怕只是opacity: 0.99） -
filter有值（filter: blur(0)也生效） -
will-change设为transform、opacity等可提升属性 isolation: isolate
这些属性在媒体查询中动态启用时尤其危险——比如桌面端无 transform，移动端加了 translateZ(0)，z-index 突然就失效了。
fixed 元素为什么“飘走”或被截断？
position: fixed 的定位基准是 viewport，但一旦它的任意祖先（哪怕是 或 ）触发了上述任一属性，浏览器就会把该祖先当作新的 containing block，fixed 元素就变成相对于它定位了。
- 现象：导航栏随页面滚动、弹窗错位、顶部空白
- 根源：iOS WebKit 和旧 Android WebView 中，
transform强制创建新 stacking context + new containing block - 验证方式：DevTools → Layers 面板里看 fixed 元素是否被包进某个父层，而不是独立成层
- 解法不是“加 z-index”，而是切断绑定：
fixed元素必须直挂，且所有上级节点不能有transform、opacity 、<code>overflow: hidden等干扰项
如何快速定位是硬件加速引发的层级异常？
别猜，用 DevTools 实锤：
- 打开「Computed」面板，搜索
transform、opacity、filter，确认它们在目标元素路径上是否非默认值 - 切换到「Layers」面板（Chrome/Safari），看异常元素是否被错误地合并进某个大图层，或本该独立却没成层
- 临时禁用可疑样式：右键点击 Styles 面板中的某条规则 → 取消勾选，观察层级是否立刻恢复正常
- 对比开关硬件加速的效果：Chrome 设置中关闭「使用硬件加速模式」并重启，若问题消失，基本可锁定为 GPU 合成路径问题
最常被忽略的一点：问题往往不出现在你写的那个 z-index 上，而是在它上面两层 DOM 的某个 opacity: 0.99 里。每次调层级前，先往上翻两层 DOM 树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
