必须组合position、transform: translatez()和box-shadow才能实现视觉深度，因grid-area仅定位xy平面；z-index需配合position:relative才生效，且父容器须设perspective和transform-style: preserve-3d以启用3d渲染，阴影须随translatez值同步增大才符合景深逻辑。
单纯用 grid-area 或 grid-column/grid-row 让卡片落在同一区域，只能实现“位置重合”，无法产生真实层次感——它不控制谁在前、谁在后、阴影怎么落。
为什么 z-index 直接写没用？
z-index 只对定位元素生效。Grid 子项默认是 position: static，此时写 z-index: 99 完全被忽略。
- 必须给每张卡片加
position: relative（或absolute，但别脱离 Grid 流） - 父容器若设了
opacity、filter、transform（没配transform-style: preserve-3d），会创建新层叠上下文，子项的z-index就被锁死在内部，无法跨容器比较 - React/Vue 动态渲染时 DOM 顺序不可控，不能靠“后写的元素自然盖住前面的”来赌层级
如何用 grid-column + transform 实现可控 Z 轴偏移
Grid 负责把卡片“摆到 XY 平面的起始点”，translateZ() 才真正控制 Z 轴偏移。但浏览器默认不启用 3D 渲染管线，必须手动开启。
- 父容器（所有卡片的共同祖先）必须设
perspective: 1000px（值在 500–1500px 较稳，太小易畸变，太大无感） - 该父容器还必须设
transform-style: preserve-3d，否则子元素的translateZ()会被扁平化到父级平面 - 卡片自身用
grid-column: 1 / 2占位，再叠加transform: translateZ(8px)，这样既保持 Grid 对齐，又独立抬高 - 别用百分比单位：
translateZ(5%)在不同容器下缩放失真，统一用px
box-shadow 怎么匹配真实深度？
阴影不是装饰，它是深度提示。如果 translateZ(16px) 的卡片和 translateZ(0) 的卡片投出一模一样的 box-shadow，人眼就分辨不出前后。
- 越靠前的卡片，阴影
y-offset和blur值越大：比如translateZ(0)→box-shadow: 0 2px 4px rgba(0,0,0,0.1)；translateZ(16px)→box-shadow: 0 8px 24px rgba(0,0,0,0.2) -
parent设overflow: hidden会直接裁掉阴影——不是没渲染，是被剪掉了。临时验证可改overflow: visible，长期方案是加padding: 8px留出落脚空间 - 避免用
text-shadow模拟多层，它只作用于文字像素，iOS Safari 下容易整条失效
最容易被忽略的是：perspective 必须写在最外层共用容器上，而不是每张卡片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
