z-index无法过渡，因其是离散整数属性，规范明确列为非可动画属性；浏览器不插值、不报错、仅在结束帧瞬间跳变，需用transform和opacity等可动画属性模拟视觉层级变化。
z-index 无法在过渡中平滑变化，因为它根本就不是可动画属性——浏览器不会对它做插值计算，只会在过渡结束瞬间“啪”地跳变。
为什么 z-index 被 transition 忽略？
规范明确将 z-index 列为「非可动画属性」。哪怕你写了 transition: all 0.3s，浏览器也只会对 opacity、transform 等支持插值的属性执行帧间计算，而 z-index 部分静默失效：不报错、不警告、不生成过渡曲线。
DevTools 的 Computed 面板可能仍显示 transition-property: z-index，但 Timeline 里查不到任何插值轨迹——它压根没参与动画流程。
-
z-index是离散整数，没有中间态（比如z-index: 1.5合法吗？不合法） - 它的作用是参与层叠上下文排序，属于 layout 阶段的静态决策，不是视觉状态
- 即使用 JS 在
requestAnimationFrame里逐帧修改z-index，结果仍是每帧都重排层叠顺序，毫无“渐进感”
常见错误写法与对应现象
以下写法看似合理，实则埋坑：
错误示例：.card { transition: z-index 0.2s, transform 0.2s; } → z-index 部分完全无效
错误示例：.modal { transition: all 0.3s; } + hover 时改 z-index → 缩放/透明度在动，遮挡关系却在最后一帧突变，造成“先放大后上浮”或短暂被遮
- 元素明明
scale(1.2)了，却还被邻近卡片盖住——因为z-index还没生效 - 弹窗淡出时，背景内容仍无法点击——
z-index已降为 0，但opacity还没到 0，视觉上还在那儿 - 使用
@keyframes动画z-index→ 多数浏览器直接忽略整条规则，或仅在起止帧应用
真正该动的是什么？
要达成“视觉上浮起”的效果，必须把动画责任交给可插值属性：
- 用
transform: translateY(-8px) scale(1.05)制造上浮+轻微放大，配合transition: transform 0.2s ease - 加
box-shadow: 0 6px 12px rgba(0,0,0,0.15)强化深度感 -
z-index只需在:hover或.active类中**立即设为固定高值**（如z-index: 100），确保从第一帧起就不被遮 - 所有涉及
z-index的元素，必须有position: relative（或absolute/fixed），否则声明无效
容易被忽略的层叠上下文陷阱
就算 z-index 写对了，也可能被父级“锁死”：
如果某个祖先元素设置了 opacity: 0.99、transform: translateZ(0) 或 filter: blur(0)，它就创建了新的层叠上下文——子元素再高的 z-index，也只能在该上下文内排序，永远超不过同级的导航栏或模态框。
- Chrome DevTools 中选中元素 → «Layout» 标签页看 «Stacking context» 是否为 Yes
- 逐级向上检查 «Computed» 里的
transform、opacity、filter，第一个非默认值就是源头 - 修复不是调子元素的
z-index，而是调那个创建上下文的父容器自身的z-index
关键不在数字变不变，而在层叠上下文的位置是否提前锚定；z-index 的跳变不可避，但视觉错位可以靠 transform 和预设层级彻底消除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
