不是必须用position: absolute；position: relative更稳妥，因它不脱离文档流、避免定位错乱，且z-index对static无效，所有卡片须显式设relative或其它定位值。
卡片堆叠展开必须用 position: absolute 吗
不是。用 position: relative 更稳妥，尤其当卡片需保留在文档流中、或父容器本身是 flex/grid 布局时。position: absolute 会脱离文档流，若父容器没设 position: relative，所有卡片会叠在 body 左上角，调试困难。
关键点：
-
z-index对static元素完全无效 —— 所有卡片必须显式设position: relative（或absolute/fixed） - 若用
flex排列卡片，子项仍要加position: relative，否则z-index不生效 - 避免父容器误加
transform、opacity: 0.99或will-change，这些会创建新层叠上下文，把子元素的z-index锁死在内部
transition-delay 怎么配才不乱序
靠 :nth-child(n) 写死延迟值（如 0s、0.1s、0.2s）只适用于固定数量卡片。一旦卡片动态加载（比如从 API 拉取），伪类就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 动态设置
style.transitionDelay：遍历卡片列表，按索引计算延迟，例如el.style.transitionDelay = `${i * 0.1}s` - 不要用
transition: all 0.3s—— 它会过渡所有可动画属性，包括color、background，导致卡顿；只写transition: transform 0.3s ease, z-index 0.1s - 移动端慎用
transform: scale()小于0.9，iOS Safari 可能识别不到 touch 区域
为什么 hover 展开后卡片“堆歪了”
常见现象：鼠标悬停后，卡片位移错位、旋转角度不对、甚至部分被裁剪。根本原因不是动画写错了，而是视觉层叠和定位逻辑冲突。
排查要点：
- 检查父容器是否设了
overflow: hidden—— 它会直接裁掉translateY(-8px)上移的部分 - 确认每张卡片的
transform是组合写，不是分两行：错误写法transform: scale(0.96); transform: translateY(-6px);（后者覆盖前者）→ 正确写法transform: scale(0.96) translateY(-6px) - 缩放别低于
0.85，位移别超过-16px，否则上层卡片遮挡关键文字或按钮 - 如果用了
perspective+translateZ做 3D 堆叠，确保父容器有transform-style: preserve-3d，否则子元素被压平
点击置顶时 z-index 突然失效
用户点击某张卡片想让它“浮到最上面”，但发现它还是被其他卡片盖住 —— 这通常是因为多个卡片各自有独立父容器，而这些父容器已创建了互不相容的层叠上下文。
正确做法：
- 所有卡片应挂载在**同一个父容器下**，且该父容器不触发新层叠上下文（不设
transform、opacity < 1） - 初始
z-index用固定步长（如10、20、30），点击时统一设为1000，并移除其他卡片的1000 - 配合
transform: translateY(-4px)实现“浮起”反馈，比纯top更安全，不触发重排 - 别依赖
:hover控制最高层 —— 多层堆叠时，上层卡片会挡住下层的 hover 区域，JS 主动切换.active类才是可靠方案
实际堆叠的关键不在“怎么写第一张”，而在“后面每张都得比前一张更小、更高、z 值更大”——这三个量必须同步，且不能被父级层叠上下文截断。稍一疏忽，整组卡片就失去深度感。
