正确做法是用position: absolute+ z-index+ transform实现视觉堆叠与交互分离，Flex仅作容器对齐；JS动态更新z-index和transform偏移量，避免transition: all，移动端需preventDefault并精确计算触摸差值，Safari需避免父容器触发新层叠上下文。
卡片堆叠靠flex-direction: column + justify-content: flex-end不行
直接用 Flex 垂直排列再反向对齐，只会让卡片上下堆在一起、视觉上重叠但实际仍按文档流排列——z-index无效，鼠标交互错乱，滑动时无法逐层移出。真正要的是“视觉堆叠 + 交互可分离 + 动画可控”，Flex 只能做容器布局，不能替代定位逻辑。
正确做法是：Flex 容器仅负责居中或基础对齐，每张卡片必须脱离文档流，用position: absolute叠加；再配合z-index和transform微调偏移与层级。
- Flex 容器设为
position: relative，作为绝对定位的参考父容器 - 所有卡片统一设
position: absolute，且top: 0、left: 0起始位置一致 - 用
z-index控制叠放顺序（越大的越在上层），通常从底层卡片开始递增 - 用
transform: translateX()和translateY()给上层卡片加轻微偏移，模拟手滑效果
如何用z-index和transform动态控制卡片层级与位移
静态堆叠容易，难点在“滑动一张后，下一张自动浮到顶层并带偏移”。这需要 JS 驱动 CSS 变量或内联样式，不能只靠纯 CSS。
推荐结构：最底层卡片z-index: 1，往上依次+1；同时每张卡片的transform按索引递增偏移量（如translateX(8px) translateY(-6px)）。JS 移除顶部卡片后，剩余卡片的z-index和transform需批量更新。
- 避免用
transition: all——会导致z-index也参与过渡，出现闪层或层级错乱 - 只对
transform和opacity做过渡，它们是 GPU 加速属性，性能好 -
z-index必须用 JS 立即更新，不能靠 CSS 动画延迟生效 - 卡片容器建议加
will-change: transform，提前提示浏览器优化渲染
移动端触摸滑动时touchstart/touchmove常见偏移失效问题
用户手指一碰就触发transform位移，但常遇到：滑动卡顿、偏移量不跟随、松手后回弹错位。根本原因是未阻止默认行为或未正确计算相对位移。
- 在
touchstart里记下初始clientX，并在touchmove中用event.touches[0].clientX实时计算差值 - 必须调用
event.preventDefault()（尤其在touchmove里），否则 iOS 会触发滚动拦截 - 不要直接改
style.left/top——它会破坏transform叠加效果；始终用style.transform = `translateX(${dx}px) translateY(${dy}px)` - 松手后判断滑动距离是否超过阈值（如
Math.abs(dx) > 80），再决定是移除还是复位
卡片堆叠布局在 Safari 上的z-index渲染异常
Safari（尤其是 iOS 15–16）对position: absolute子元素的z-index解析有 bug：当父容器有transform或filter时，会创建新的层叠上下文，导致z-index只在该上下文中生效，全局堆叠失效。
- 确保卡片容器（Flex 父元素）**不要**带
transform、opacity 、filter等会触发新层叠上下文的属性 - 如果必须加动效，把
transform移到卡片自身，而非容器 - 测试时在真机 Safari 打开
Web Inspector → Elements → 3D View，观察层叠是否分层错误 - 兼容写法：给每张卡片加
transform: translateZ(0)强制硬件加速，有时能绕过 Safari 的层叠 bug
实际最难的不是堆叠，而是让每张卡片的z-index、transform、过渡时机、触摸响应全部同步——稍有不同步，就会出现“手滑了但卡片没动”“滑出去了但下一张没浮上来”这类体验断点。这些细节在 Chrome 里可能没问题，换到 Safari 或低端安卓机就立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
