根本原因是transform、opacity等属性触发合成并创建新层叠上下文，使子元素z-index仅在内部生效；修复方式是给父容器添加transform: translateZ(0)或will-change: transform以创建更高阶层叠上下文。
动画元素会突破 z-index 层级怎么办
根本原因不是动画本身，而是浏览器对 transform、opacity 等触发合成的属性会创建新的层叠上下文（stacking context）。一旦子元素创建了新层叠上下文，它的 z-index 就只在自己内部生效，不再和父容器其他兄弟元素比层级。
- 常见现象：
div.animated明明设了z-index: 100，却盖不住同级的div.modal - 典型诱因：用了
transform: translateX(0)、opacity: 0.99、will-change: transform等 CSS 属性 - 检查方法：在 Chrome DevTools 的 Layers 面板里看是否多出独立图层；或用“Rendering”面板勾选“Paint flashing”，观察动画区域是否单独绘制
transform 动画时父容器 z-index 失效的修复方式
不能靠给父容器加 z-index 解决——它没创建层叠上下文，压不住子元素的新上下文。得让父容器也生成一个更“高阶”的层叠上下文，把动画子元素兜住。
- 最稳妥做法：给父容器加
transform: translateZ(0)或will-change: transform（仅需声明一次，不需动画） - 兼容性注意：IE10+ 支持
translateZ(0)，will-change在 Safari 旧版本有闪烁 bug，生产环境优先选前者 - 别用
position: relative; z-index: 0——它不创建层叠上下文（除非同时有transform等属性），纯属无效操作
用 @keyframes 做位移动画时意外遮挡其他组件
问题常出现在使用 top/left + position: absolute 的老式写法上。这类动画不触发合成，但会引发重排，且若父容器未设 overflow: hidden，动画元素可能溢出并覆盖外部内容。
- 推荐改用
transform: translateY()替代top，既性能好，又便于用translateZ(0)统一管控层叠 - 如果必须用
top，确保父容器有position: relative和overflow: hidden，否则动画元素脱离文档流后不受约束 - 注意：
transform动画默认不改变文档流位置，所以即使视觉上移出父容器，也不会影响布局，但遮挡行为仍由层叠上下文决定
React/Vue 项目中动画组件层级错乱的调试线索
框架组件容易嵌套多层，z-index 被层层覆盖，加上 CSS-in-JS 或 scoped style 的选择器权重干扰，问题更隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 先禁用所有动画 CSS，确认基础层级是否正常；再逐个开启，定位是哪个 class 触发了层叠上下文
- 检查是否在组件根元素上误加了
transform（比如为了触发硬件加速），却忘了同步处理父容器 - 避免全局写
* { will-change: transform }—— 它会让所有元素都创建层叠上下文，彻底打乱原有层级逻辑
层叠上下文不是开关，是嵌套树。动一个节点，可能整条路径上的层级关系都得重新评估。动手前先看 DevTools 的 Layers 面板，比猜更省时间。
