卡片堆叠效果需 transform 与 z-index 协同实现：transform 控制缩放和位移以模拟真实堆叠感，z-index 配合 position（如 relative）决定层叠顺序，二者缺一不可。
用 transform 和 z-index 控制卡片堆叠顺序
层叠效果不是靠 z-index 单独撑起来的——它只管“谁在上”，不管“怎么叠”。真正决定视觉错落的是 transform 的位移和缩放，而 z-index 必须配合定位（position: relative 或以上）才生效。没设定位，z-index 直接被忽略。
-
z-index值要递增（比如 10, 20, 30），不能全写成 1；否则所有卡片都在同一层 - 每张卡片必须有
position: relative（或absolute/fixed），否则z-index不起作用 - 缩放 + 上移要用
transform: scale(0.95) translateY(-8px)这种组合，分开写会被后一个覆盖
为什么后一张卡片要同时缩小又上移
单纯 translateY(-8px) 会让卡片往上跑但大小不变，看起来像“悬空”，缺乏真实堆叠感；只缩放不位移，又会重叠在正下方，看不出前后关系。两者叠加模拟了物理卡片被手拿起一点、略压弯的视觉反馈。
- 典型值：第一张
scale(1) translateY(0)，第二张scale(0.96) translateY(-6px)，第三张scale(0.92) translateY(-12px) - 缩放别低于 0.85，否则文字太小难读；位移别超过 -16px，否则上层卡片遮挡关键内容
- 注意：
transform会触发新层叠上下文，如果父容器用了will-change: transform或opacity: 0.99，可能让z-index失效
常见错误：卡片堆歪了、层叠顺序错乱
最常踩的坑是把所有卡片放在同一个父容器里，又没控制好文档流。浮动、flex 或 grid 默认不会自动创建层叠上下文，导致 z-index 行为不可控。
- 不要用
float布局做堆叠——z-index在浮动元素上行为不稳定 - 避免父容器设
overflow: hidden，它会裁剪掉上移的卡片部分 - 如果用
flex排列卡片，确保子项有position: relative，且z-index值严格按顺序递增 - 错误示例：
.card:nth-child(2) { z-index: 1; }—— 没设position，这行代码等于没写
兼容性与性能提醒
transform 和 z-index 在现代浏览器里没问题，但 IE11 对 transform 缩放后的点击区域判断有偏差，iOS Safari 旧版对多层 transform 叠加偶尔闪屏。
立即学习“前端免费学习笔记（深入）”；
- 移动端慎用
scale小于 0.9，可能导致 touch 区域识别偏移 - 别给每张卡片加
transition: all 0.3s——动画会卡顿，只过渡transform和z-index - 如果卡片数量动态变化（比如从 API 加载），用 JS 动态设
style.zIndex和style.transform，别依赖 CSS 伪类序号
