z-index本身不能加transition或animation，因其为离散整数属性，无法插值；需用transform等可动画属性营造视觉层叠感，z-index仅阶跃式兜底控制最终顺序。
z-index 本身不能加 transition 或 animation
直接写 transition: z-index 0.3s 或在 @keyframes 里对 z-index 做 from/to 变化，浏览器会完全忽略该部分——因为 z-index 是离散整数，没有中间态（比如不存在 z-index: 5.5），无法插值。你只会看到层级“啪”一下跳变，毫无过渡感。
真正起作用的是 transform + z-index 分工协作
视觉上的“浮起”“前置”效果，必须靠可动画属性驱动，z-index 只负责兜底保障最终层叠顺序：
-
transform: translateY(-4px) scale(1.01)制造上浮+轻微放大，有深度感且支持硬件加速 -
box-shadow配合变化强化立体错觉 -
z-index在 hover 或 active 类里直接设为固定值（如z-index: 10），不参与过渡，只确保动画结束时不会被兄弟元素遮挡 - 所有元素必须是定位元素：
position: relative或absolute，否则z-index无效
父级 stacking context 是最常被忽略的层级陷阱
你以为设了 z-index: 999 就一定在最上面？不一定。如果父容器有以下任一属性，就会创建新的层叠上下文，子元素的 z-index 只在它内部生效：
-
opacity: 0.99（哪怕只是 0.99，不是 1） -
transform: translateZ(0)或任何非none的transform -
filter、will-change、perspective
调试时得一层层检查父级是否意外截断了层级链——用浏览器开发者工具的“Layers”面板看渲染层，比单纯查 CSS 更可靠。
模态框/轮播卡片等多层组件的实操要点
这类场景下，z-index 不是“慢慢升”，而是“准时切”：
- 模态框显示前，先同步设好
z-index和visibility: visible，再触发动画（如opacity或transform），避免动画中途被遮挡 - 轮播卡片中，不要靠
animation-delay推迟z-index变化；应手动为每个卡片设递增值（如z-index: 10、20、30），确保入场顺序与视觉顺序一致 - 隐藏时，先完成
opacity过渡，再降z-index或设visibility: hidden，防止点击穿透或视觉残留
复杂点不在怎么写动画，而在哪一层设 z-index、谁来管这个 stacking context——错一层，整个层级就乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
