绝对定位+ z-index + transform 是实现卡片堆叠的唯一可靠方案，因 flex/grid 无法脱离文档流，z-index 无效且交互错乱；需父容器 relative、子项 absolute 统一 top/left，z-index 控制层级，transform 实现偏移与动画，仅对 transform/opacity 过渡，js 动态更新 z-index。
直接用 position: absolute + z-index + transform 实现，Flex 或 Grid 只能做容器对齐，不能替代定位逻辑。
为什么 Flex 垂直堆叠不行
用 flex-direction: column + justify-content: flex-end 看似能让卡片“叠”在一起，但它们仍在文档流中，z-index 无效，鼠标事件会穿透或错乱，滑动时无法逐张移出。真正需要的是视觉堆叠 + 交互可分离 + 动画可控——这必须靠脱离文档流的绝对定位来实现。
- 父容器设
position: relative，作为所有卡片的定位参考 - 每张卡片设
position: absolute，且统一top: 0、left: 0起始位置 - 用
z-index控制层级（底层最小，顶层最大），不能依赖 DOM 顺序 - 用
transform: translateX()和translateY()给上层卡片加轻微偏移，模拟手滑错位感
transition 动画只该作用于 transform 和 opacity
避免写 transition: all——它会让 z-index 也参与过渡，导致闪层、层级跳变或动画卡顿。浏览器无法对 z-index 做插值计算，它只能立即生效。
- 只对
transform和opacity设置过渡：它们是 GPU 加速属性，性能好 -
z-index必须由 JS 立即更新（比如移除顶部卡片后，剩余卡片的z-index需批量重排） - 给卡片容器加
will-change: transform，提前提示浏览器优化渲染路径 - 移动端需在
touchmove中调用event.preventDefault()，否则 iOS 会拦截触摸行为
hover 悬浮展开和点击翻转不能混用同一套结构
悬浮展开（如扇形弹出）和点击翻转（如 3D 卡片正反切换）底层机制不同，强行共用会导致样式冲突或事件失效。
- 悬浮展开依赖
:hover+nth-child+transition-delay，适合静态内容预设 - 点击翻转必须用
perspective+transform-style: preserve-3d+backface-visibility: hidden，且perspective必须设在父容器，不能写在卡片本身 - 如果要同时支持 hover 和 click，建议用 JS 切换类名（如
.is-flipped），CSS 只负责定义状态样式，不绑定事件类型 - Safari 下若父容器触发了新层叠上下文（比如设置了
opacityfilter），会导致z-index行为异常，需检查并移除干扰属性
最易被忽略的一点：所有卡片的 transform 偏移量必须基于同一个参考系计算，JS 更新时不能只改 z-index 而漏掉 transform，否则会出现“层级正确但位置错乱”的诡异现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
