卡片hover未升起的根本原因是z-index仅对定位元素生效，需加position: relative等；父容器overflow: hidden会裁剪；多卡片同层叠上下文时需父级z-index配合；css变量须为纯数字且作用域正确；z-index不可过渡，应配合transform和box-shadow模拟升起感。
hover时卡片没升起，z-index变化不生效
根本原因是 z-index 只对「定位元素」起作用。如果卡片本身是 static（默认定位），改 z-index 完全无效，看起来就像“没反应”。
- 必须给卡片加
position: relative（或absolute/fixed）才能让z-index生效 - 如果父容器有
overflow: hidden，升起后会被裁剪——哪怕z-index正确也看不见顶部 - 多个卡片共用同一层叠上下文（比如同个
position: relative父容器），仅靠z-index无法跨容器提层，得靠父级的z-index配合
CSS变量控制z-index的写法和坑点
用 --z-hover 这类变量确实灵活，但别直接写 z-index: var(--z-hover) 就完事——CSS变量不能参与计算，也不能 fallback 到数字类型以外的值。
- 变量定义要带单位？错。
z-index是纯整数，变量值必须是数字，比如:root { --z-base: 1; --z-hover: 10; } - 过渡
z-index无效：浏览器不支持z-index的动画/transition，视觉上是“突变”。想平滑，得配合transform: translateY(-4px)或box-shadow扩展来模拟“升起感” - 变量作用域容易错：在组件内部定义
--z-hover，但:hover里读的是全局变量，记得用html[data-theme="dark"]这类选择器确保作用域正确
真正让卡片“浮起来”的三件套组合
单靠 z-index 升高只是“盖到前面”，用户感知不到“升起”。需要视觉线索强化立体感：
-
transform: translateY(-4px)：真实位移，比纯z-index更可信 -
box-shadow: 0 8px 16px rgba(0,0,0,0.12)：阴影随高度增强，注意模糊半径和透明度要匹配位移量 -
transition: transform 0.2s ease, box-shadow 0.2s ease：别忘了给z-index加 transition——它没用，但加了也不报错；重点是前两项
深色模式下阴影和z-index的兼容处理
深色背景里浅色阴影会发灰、不明显，硬调 rgba(0,0,0,0.3) 可能过重；同时深色模式常伴随更高的基础 z-index 值（防遮挡），变量管理容易混乱。
- 用
color-scheme: dark或自定义属性区分：比如html.dark { --z-hover: 20; --shadow-hover: 0 6px 12px rgba(0,0,0,0.2); } - 避免用
filter: drop-shadow()替代box-shadow：它不随 transform 缩放，边缘可能糊，且性能稍差 - 移动端点击态（
:active）也要同步变量，否则手指按下去没反馈——尤其在 Safari 上:hover不稳定，得补:active
will-change: transform 没开，或者忘了在 hover 触发前就声明好 transform 基础值（比如 transform: translateY(0)），导致第一次悬停有卡顿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
