z-index不支持动画，浏览器不会对其插值计算，它是离散整数开关，属non-animatable属性；transition或@keyframes中使用均无效，只能通过transform、opacity等可插值属性模拟层级变化效果。
z-index 本身不支持插值计算
浏览器根本不会对 z-index 做帧间插值——它不是“颜色”或“位移”，而是一个离散的整数开关。规范明确将其列为 non-animatable property，所以写 transition: z-index 0.3s 或 transition: all 0.3s 时，z-index 部分会被静默忽略，既不报错也不警告。
你看到的“跳变”，不是动画卡顿，而是渲染引擎在 layout 阶段一次性重排层叠顺序的结果。不存在 z-index: 1.5 这种中间状态，自然也谈不上渐变。
常见错误写法与对应现象
这些写法看似合理，实则无效：
-
transition: all 0.3s+ hover 中修改z-index→ 缩放/opacity 正常动，但遮挡关系“啪”一下切换，造成视觉割裂 -
@keyframes里写from { z-index: 10; } to { z-index: 999; }→ 动画播放时只在起始和结束帧生效，中间帧仍为初始值 - 给
float元素加z-index和transition→float不创建层叠上下文，z-index根本不生效 - 父容器有
transform、opacity: 0.99或filter→ 意外创建新层叠上下文，子元素的z-index只在内部比大小，外部层级失控
真正可过渡的替代方案
要模拟“浮起”“上浮”“顶出”的视觉效果，必须绕开 z-index，改用支持插值的属性：
-
transform: translateY(-4px) scale(1.02)：轻微上移+放大，配合transition: transform 0.25s ease-out，硬件加速且平滑 -
box-shadow: 0 6px 12px rgba(0,0,0,0.15)：增强深度错觉，比调数字更直观可信 -
opacity+visibility控制交互时机：比如悬停时先opacity: 1，再通过pointer-events: auto开启点击，避免穿透 - 伪元素覆盖方案：底层固定旧背景，上层伪元素用
opacity过渡新渐变，z-index: -1确保不遮内容
z-index 的正确使用姿势
z-index 不是动画属性，而是兜底保障。它的作用是在动画完成后的最终状态中，确保层叠顺序不出错：
- 所有需要参与层级控制的元素，必须设
position: relative（或absolute/fixed），否则z-index无效 -
z-index值应在 :hover 或 .active 类中直接声明，不参与transition声明，例如：.card:hover { z-index: 100; } - 多层组件（如模态框+下拉菜单）中，
z-index应按功能层级阶梯式分配（如 1000 / 2000 / 3000），而非堆砌 9999 - 隐藏时，先完成
opacity或transform过渡，再设visibility: hidden或降z-index，防止点击穿透
最容易被忽略的是层叠上下文归属——错一层，整个视觉顺序就乱了。判断谁创建了上下文、谁在它里面比大小，比写多少行 transform 都关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
