z-index在grid子项上无效是因为其默认position: static，需设position: relative；父容器的opacity/filter/transform会创建新层叠上下文；box-shadow须随translatez同步调整y-offset与blur；overflow: hidden会裁剪阴影；移动端应避免依赖:hover，改用:focus或js控制。
为什么直接写 z-index 在 Grid 子项上没用？
因为 Grid 子项默认是 position: static，此时 z-index 完全被浏览器忽略。你写了 z-index: 99，它就像没写一样——不是失效，是压根不进层叠计算流程。
必须显式给每张卡片加 position: relative（别用 absolute，否则会脱离 Grid 布局流）；如果父容器本身设置了 opacity、filter 或 transform（且没配 transform-style: preserve-3d），就会创建新层叠上下文，子项的 z-index 就锁死在内部，无法和兄弟卡片比高低。
React/Vue 动态渲染时 DOM 顺序不可控，不能靠“后写的元素自然盖住前面的”来赌层级。
如何让 box-shadow 真正匹配悬浮高度？
阴影不是装饰，是深度提示。如果两张卡片一个 transform: translateZ(0)、一个 translateZ(12px)，但阴影参数一模一样，人眼就分不出前后。
box-shadow 的 y-offset 和 blur 必须随 translateZ() 同步增大：
-
translateZ(0)→box-shadow: 0 2px 4px rgba(0,0,0,0.1) -
translateZ(8px)→box-shadow: 0 4px 12px rgba(0,0,0,0.15) -
translateZ(16px)→box-shadow: 0 8px 24px rgba(0,0,0,0.2)
别用百分比单位写 translateZ(5%)——不同容器下缩放失真，统一用 px。
父容器为什么总把阴影“剪掉”？
常见错误是父级 grid-container 设置了 overflow: hidden（尤其套在 .row 或带 border-radius 的 wrapper 里），导致阴影超出边界就被裁掉——不是没渲染，是被藏了。
临时验证可改 overflow: visible；长期方案是加 padding: 8px 留出阴影落脚空间。
更隐蔽的陷阱：父容器是 Flex（比如 display: flex; align-items: stretch），可能把 Grid 容器“压扁”，间接挤出阴影区域。
移动端悬停交互为何点不动？
iOS Safari 和 Android Chrome 在真机上不把单次点击当 :hover，这是规范行为，不是 bug。纯 CSS :hover 在触屏设备上基本不可靠。
底线方案：给卡片加 tabindex="0"，再写 .card:focus { transform: translateY(-6px); }，兼顾键盘与触摸。
如需强反馈，用 JS 切换 is-lifted 类，但注意快速连点时状态残留问题——别只靠 click，建议监听 touchstart + touchend 配合防抖。
真正容易翻车的地方不在代码，在布局容器。写了三行 CSS 却发现阴影消失、卡片边缘被裁、上移后文字模糊——大概率是父容器的 overflow、transform 或 align-items 惹的祸，得一层层往上查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
