z-index不生效主因是父容器触发层叠上下文，使子元素z-index仅在内部生效；须确保动画元素自身有position（如relative）并设z-index，同时避免父级滥用transform、opacity
动画元素被遮挡，z-index 不生效的常见原因
直接加 z-index 没反应，大概率是因为父容器触发了新的层叠上下文（stacking context），导致子元素的 z-index 只在该上下文内生效，无法越过父级去和外部元素竞争层级。典型触发条件包括：设置了 position 且值不为 Static、opacity 小于 1、transform 非 none、Filter、will-change 等——而 css 动画中大量使用 transform 和 opacity，所以极易意外创建层叠上下文。
让动画元素真正“浮起来”的实操方法
核心思路是：确保动画元素及其最近的、有层叠上下文的祖先之间不形成“层级隔离”。常用手段如下：
- 给动画元素自身设置
position: relative（或absolute/fixed），再配合z-index—— 这是最直接有效的方式 - 检查其父容器是否无意中加了
transform、opacity: 0.99或will-change: transform；如有，尝试移除或改用translateZ(0)替代（它更轻量，且不强制创建新层叠上下文） - 若必须保留父级层叠上下文（如做卡片翻转），那就把需要“浮出”的动画元素提到更高层级的容器中，比如挂到
body下，用 js 动态插入并定位 - 避免对动画元素同时设
z-index和opacity: 0—— 半透明本身会创建层叠上下文，可能抵消你设的z-index效果
transform 动画中 z-index 失效的典型场景与修复
比如用 transform: translateX(100px) rotate(10deg) 做位移旋转时，元素自动获得层叠上下文，此时单纯给它设 z-index: 999 是无效的，除非它本身有 position 值。
.animated-element { position: relative; /* 必须加 */ z-index: 999; animation: slideRotate 0.5s ease; } @keyframes slideRotate { from { transform: translateX(0) rotate(0); } to { transform: translateX(100px) rotate(10deg); } }
注意：transform 动画本身不会“清除” z-index，但会要求元素先满足层叠上下文参与资格（即有 position），否则 z-index 根本不被解析。
立即学习“前端免费学习笔记（深入）”；
用 will-change 提前声明时的 z-index 注意事项
will-change: transform 会提前创建层叠上下文，效果等同于加了 transform: translateZ(0)。如果你后续又想靠 z-index 控制层级，必须同步确保该元素已定位：
- ❌ 错误写法：
will-change: transform;+z-index: 100;（无position，z-index被忽略） - ✅ 正确写法：
position: relative;+z-index: 100;+will-change: transform; - ⚠️ 更稳妥的替代：
transform: translateZ(0);替代will-change，它同样开启 GPU 加速，但兼容性更好，且不强制创建独立层叠上下文
复杂交互动画里，z-index 是否生效，往往取决于离它最近的那个「有层叠上下文的定位祖先」，而不是全局最高值。盯住 dom 结构和 computed styles 里的 stacking context 标记，比盲目调高数字更管用。