正确设置z-index需提前定义层级，因z-index不可动画。定位元素通过高z-index确保层叠优先，避免被遮挡，结合transform和opacity实现流畅动画效果。
在使用 CSS 动画时，如果涉及元素的层叠显示（如淡入淡出、滑动出现、模态框等），z-index 和 animation 的配合就显得尤为重要。正确处理层叠顺序能避免动画过程中元素被遮挡或显示异常。
理解 z-index 与 stacking context
z-index 只对定位元素（position: relative、absolute、fixed、sticky）起作用。它控制元素在 Z 轴上的堆叠顺序，数值越大越靠前。
但要注意，当父元素创建了新的层叠上下文（stacking context），其子元素的 z-index 将只在该容器内生效。例如：
- opacity 小于 1
- transform 不为 none
- 使用 animation 或 will-change
这些属性都可能触发新的层叠上下文，导致即使设置了高 z-index，也无法“穿透”到外部层级。
立即学习“前端免费学习笔记（深入）”；
CSS 动画中 z-index 的常见问题
在执行动画时，比如一个弹窗从底部滑入，若未提前设置好层级，可能会被其他内容遮挡。
典型错误写法：
.modal {
opacity: 0;
transform: translateY(100%);
transition: all 0.3s;
}
.modal.show {
opacity: 1;
transform: translateY(0);
z-index: 1000; /* ❌ 无效：z-index 不能动画 */
}
问题在于：z-index 本身不可被平滑动画，且若初始状态没有足够高的 z-index，动画开始时仍会被遮挡。
正确实现层叠动画的方法
要让动画过程中的层叠关系正常，关键是在动画开始前就确立正确的堆叠顺序。
推荐做法：
- 默认设置较高的 z-index（确保一开始就处于上层）
- 用 opacity、transform 控制显隐
- 结合 animation 或 transition 实现视觉效果
示例：模态框淡入 + 上滑动画
.modal {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
opacity: 0;
z-index: 1000; /* ✅ 提前设置 */
transition: transform 0.3s ease, opacity 0.3s ease;
}
<p>.modal.open {
transform: translateY(0);
opacity: 1;
}</p>这样在打开瞬间，元素已在顶层，不会被遮挡，同时过渡自然。
使用 animation 替代 transition 的场景
当需要更复杂的入场/出场动画时，可用 @keyframes 配合 z-index 精确控制时机。
例如：先提升层级，再执行动画
@keyframes slideIn {
0% {
transform: translateY(100%);
opacity: 0;
z-index: auto; /* 关键帧中可设，但实际不生效 */
}
1% {
z-index: 1000; /* 无法动画 z-index */
}
100% {
transform: translateY(0);
opacity: 1;
}
}
⚠️ 注意：keyframes 中设置 z-index 是无效的。必须在元素常态中提前定义。
正确方式仍是：
.modal.animate-in {
z-index: 1000;
animation: slideUp 0.4s forwards;
}
<p>@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}</p>基本上就这些。核心是：不要依赖动画改变 z-index，而是提前设定好层级，用 transform 和 opacity 做视觉动画。只要结构清晰，层叠问题就不难解决。
