z-index不生效的直接原因是父容器position未设置或为static；需确保定位元素及其最近有定位的父容器未意外创建层叠上下文，避免transform与z-index冲突。
动画元素被其他内容遮挡，z-index 不生效？
直接原因通常是父容器的 position 值没设，或设成了 static（默认值）。z-index 只对定位元素（relative、absolute、fixed、sticky）起作用。
常见错误现象：z-index: 9999 写了但动画还是被盖住；审查元素发现父级 div 的 computed position 是 static。
- 给动画元素本身加
position: relative或position: absolute，再配z-index - 如果它嵌在卡片、弹窗等组件里，检查**最近的有定位的父容器**是否无意中创建了新的层叠上下文（比如加了
opacity: 0.99、transform: translateZ(0)、will-change: transform）——这会让子元素的z-index只在该父容器内部生效 - 避免在动画元素上滥用
transform同时又依赖z-index：某些浏览器下，transform会隐式触发层叠上下文，让z-index失效
多个动画同时运行，怎么确保它们按预期前后排列？
层叠顺序不是“谁后出现谁在前”，而是由层叠上下文树决定的。同一上下文内才按 z-index 数值比大小；跨上下文时，父级的层叠等级优先。
使用场景：模态框里有个加载动画，同时页面顶部有固定导航栏，两者都要显示且不互相遮挡。
立即学习“前端免费学习笔记（深入）”；
- 给导航栏设
position: fixed; z-index: 1000，并确保它的父容器没有意外创建更高层叠上下文 - 模态框用
position: fixed; z-index: 2000，加载动画作为其子元素，只需position: relative; z-index: 1就够了——它自动属于模态框这个上下文 - 不要给所有动画都设超大
z-index（比如全写9999），容易引发后续覆盖混乱；按功能分层：导航 > 弹窗 > 加载 > 提示气泡，数值留出余量（100、200、300）
transform 动画和 z-index 冲突怎么办？
只要用了 transform（哪怕只是 transform: translateY(0)），元素就会变成一个独立的层叠上下文。此时它的 z-index 只控制它内部子元素，对外部同级元素无效。
错误示例：.anim { transform: scale(1.1); z-index: 5; } —— 这个 z-index 实际上不会让它浮在隔壁没 transform 的兄弟元素上面。
- 如果必须用
transform做动画，又需要控制层级，就把z-index提前设在**父容器**上，而不是动画元素自身 - 或者改用
top/left+position: relative替代位移动画（适合简单偏移） - 真要靠
transform实现 3D 效果时，用translateZ()显式控制 Z 轴深度，比依赖z-index更可靠（但注意仅对perspective父容器内的元素有效）
动画结束后层级突然错乱？
常见于用 JavaScript 控制 animation 播放后，通过 animationend 移除类名或重置样式，却忘了恢复 z-index 或 position。
比如：一个按钮点击后弹出带缩放动画的菜单，动画结束菜单 display: none，但下次再打开时位置/层级异常。
- 动画类里只写动画相关属性（
transform、opacity），别混写z-index或position—— 这些应该放在常态类里 - 用
animation-fill-mode: forwards保持最终帧状态，但注意它不会保留z-index变更，因为z-index不是可动画属性 - 如果动画涉及显隐切换，优先用
visibility: hidden+opacity，而不是display: none，避免 DOM 重排导致层叠上下文重建
真正麻烦的是嵌套定位 + 多重 transform + 动态插入节点——这时候 z-index 很快就不是数字大小问题，而是层叠上下文嵌套深度问题。调的时候先用 DevTools 的 Layers 面板看实际渲染层，比猜靠谱得多。
