z-index不能加transition因其为离散整数，浏览器不支持插值计算，动画中元素被遮挡主因是z-index切换时机不当；替代方案是用transform: translatez()或scale()配合preserve-3d实现平滑视觉层级。
z-index 为什么不能加 transition
因为 z-index 是离散整数，浏览器不支持插值计算。你写 transition: z-index 0.3s，它不会渐变，只会瞬间跳变——前一帧是 z-index: 1，后一帧直接变成 z-index: 999，中间没有“2、3、4…”的过程。
动画中元素被遮挡的真正原因
不是 z-index 没动，而是它动得太晚或太早。常见错误是：只在 .show 类里设 z-index: 1000，但初始状态没设足够高的值，导致动画刚开始那几毫秒仍被其他元素盖住。
- 模态框滑入时闪一下被遮住 → 初始状态就该有
z-index: 1000，而不是等show才加 - 卡片 hover 浮起却卡在半途 →
z-index阶跃切换时机要和transform动画起点对齐，不能依赖 transition 自动同步 - 父容器触发了新层叠上下文（比如加了
opacity: 0.99或transform: scale(1)）→ 子元素的z-index只在内部生效，再高也穿不出去
替代方案：用 transform 制造“视觉层级”
真正可动画、且性能更好的方式，是放弃靠 z-index 控制前后，改用 transform: translateZ() 或 scale() 配合 transform-style: preserve-3d 来模拟深度感。
-
translateZ(1px)和translateZ(-1px)能让元素在 3D 空间里前后偏移，配合transition: transform就有平滑进出效果 - 纯 2D 场景下，
transform: scale(1.02)+ 提前设好z-index，缩放会触发重绘且过渡自然 - 务必给父容器加
transform-style: preserve-3d，否则translateZ会被扁平化失效
JavaScript 动态控制 z-index 的必要场景
当动画阶段必须精确干预层叠顺序时（比如拖拽中实时置顶、多弹窗按打开顺序排序），CSS 类切换不够用，就得靠 JS。
- 监听
animationstart或transitionrun，在动画开始前把目标元素z-index设为当前最高值 - 用
getComputedStyle(el).zIndex获取当前值，避免硬编码冲突 - 动画结束（
animationend或transitionend）后，及时还原或移交层级，防止残留高z-index干扰后续交互
z-index 定义静态秩序，什么时候该用 transform 做动态视觉表达——混用或错判时机，比属性写错更难调试。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
