z-index 不会触发 CSS 动画，因其是离散整数，无法插值；应改用 transform 和 box-shadow 实现视觉“浮起”，z-index 仅作层叠保障。
z-index 不会触发 CSS 动画，别白费劲去给它加 transition
直接说结论：z-index 是一个**离散值**（整数），不是连续可插值的属性，浏览器无法在两帧之间计算中间状态。哪怕你写了 transition: z-index 0.3s，动画过程中它也只会“啪”一下跳变，毫无过渡效果。
常见错误现象：
- 卡片悬停时想“浮起一层”，只加
z-index: 10+transition→ 结果无动画，层级突变 - 用
@keyframes给z-index写 from/to → 控制台没报错，但动画里该在哪还在哪
真正可行的替代思路是：用视觉位移模拟“层次提升”，再配合 z-index 做最终层叠保障 —— 二者分工明确，不混用。
用 transform + z-index 协同实现可信的“浮层”效果
要让元素看起来“升到上层”，优先靠 transform: translateY(-4px) scale(1.02) 这类视觉变化；z-index 只在需要避免被遮挡（比如阴影裁剪、兄弟元素覆盖）时才设为更高值 —— 它是保险，不是动画主体。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 动画主体用
transform和box-shadow，它们支持硬件加速且可平滑插值 -
z-index在动画开始前（:hover或.active类）直接设好，不要试图让它渐变 - 确保父容器有
position: relative（或其它非static值），否则z-index无效 - 如果多个浮动卡片互相交叠，统一用
z-index: 1（默认）和z-index: 2（激活态）即可，无需大数字堆砌
.card {
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
z-index: 2;
}多层动画嵌套时，z-index 的 stacking context 陷阱
你以为设了 z-index: 999 就一定在最上面？不一定。如果父元素创建了新的 stacking context（比如有 opacity: 0.99、transform、will-change 或 filter），子元素的 z-index 就只在该上下文内生效 —— 外部其他 stacking context 里的元素仍可能盖住它。
典型场景：
- 一个带
transform: rotateY(10deg)的 3D 容器里放了几个.card - 这些卡片 hover 后
z-index设再高，也盖不住容器外另一个普通div
排查方法：
- Chrome DevTools → Elements 面板右键元素 → Reveal in Layers Panel，看 stacking context 层级
- 临时移除父级的
transform/opacity/filter，确认是否恢复预期叠放 - 必要时，在共同祖先上统一控制
z-index，而非只动子元素
用 will-change 提前声明，避免 transform 动画卡顿
当多个卡片同时执行 transform 动画（尤其含 scale 或 rotate），未优化时容易掉帧。这不是 z-index 的问题，但常被误认为“层级导致性能差”。
关键点：
-
will-change: transform告诉浏览器“这个元素即将变换”，提前分配合成层 - 别滥用：只加在真正会动画的元素上，且最好在 hover 前一刻（如用 JS 切换 class）再加，避免长期占用内存
- 搭配
transform: translateZ(0)或translate3d(0,0,0)强制 GPU 加速（现代浏览器中will-change更推荐）
.card {
will-change: transform;
}
.card:hover {
will-change: unset; /* 动画结束后清除，减少资源占用 */
transform: translateY(-6px) scale(1.015);
}复杂点在于：视觉层次 ≠ 层叠顺序，而人眼对位移+阴影+模糊的感知远强于 z-index 数值本身。别让 z-index 承担它不该承担的动画责任。
