z-index本身不支持平滑过渡，因其为离散整数属性，无法插值；视觉“浮起”效果应由transform、opacity等可动画属性驱动，z-index仅作阶跃式兜底控制层叠顺序。
z-index 本身不能动画，写 transition: z-index 0.3s 或在 @keyframes 里对 z-index 做 from/to 变化，浏览器会直接忽略——它没有中间态，比如 z-index: 1.5 不存在。
为什么 z-index 在动画里“滞后”或“突变”？
这不是 bug，是规范行为：z-index 是离散整数，无法插值。你看到的“先缩放、后上浮”，本质是 transform 平滑执行，而 z-index 在 :hover 触发瞬间阶跃切换，两者不同步。
- 常见错误：给
z-index加transition，或把scale当成 CSS 属性写进transition（正确应为transform） - 更隐蔽的问题：父容器有
opacity: 0.99、transform、filter等属性，意外创建了新的层叠上下文，子元素的z-index只在内部生效 - 最基础但常被漏掉：元素没设
position，z-index完全不生效
怎么让“浮起”效果看起来平滑？
靠 transform 和 box-shadow 营造视觉层叠感，z-index 只作兜底保障，不参与动画过程。
-
transform: translateY(-4px) scale(1.02)比单纯改z-index更可信，且支持硬件加速 -
box-shadow: 0 6px 12px rgba(0,0,0,0.1)强化深度错觉，比调z-index数值更直观 -
z-index在:hover或.active类里直接设固定值（如z-index: 100），不加任何过渡声明 - 所有动画元素必须有
position: relative（或其它非static值）
多层组件（模态框、轮播卡片）怎么避免层级冲突？
不要靠 z-index 数值堆砌，关键在层叠上下文的归属和时序控制。
- 模态框显示前，先同步设置
z-index和visibility: visible，再触发动画（如opacity或transform） - 轮播卡片中，给当前项统一加
.active类，其z-index设为2，其余为1；别用animation-delay推迟z-index切换 - 隐藏时，先完成
opacity过渡，再降z-index或设visibility: hidden，防止点击穿透 - 父容器若用了
transform，它就自动成为独立层叠上下文——此时子元素的z-index只在它内部比大小
transform 动画，而是判断该在哪一层设 z-index、谁来管这个层叠上下文。错一层，整个视觉顺序就乱了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
