最可控的卡片堆叠方案是用 position: relative 配合 top/left 或 transform: translateY() 微调位置，并设递增 z-index；z-index 必须与定位属性共存，hover 时需统一重置其他卡片层级。
position: relative 配合 top/left 是最可控的堆叠起点
卡片堆叠不是靠 position: absolute 把所有元素强行拉到同一个坐标——那样会脱离文档流，后续卡片难维护、响应式易崩。真正稳妥的做法是让每张卡片保持在普通流中，用 position: relative 做局部偏移。
关键点在于：relative 不影响其他元素布局，但能用 top、left 微调自身位置，配合 z-index 控制叠放顺序：
- 父容器无需设
position: relative（除非你要限制绝对定位子元素范围，但这里不需要） - 每张卡片加
position: relative，再逐个设递增的z-index和微小负值top（比如 -8px），形成“后一张盖前一张”的视觉错觉 - 避免用正数
top向下推——会导致卡片整体下移，堆叠基线不稳
z-index 必须配合定位属性才生效
这是最常踩的坑：z-index 在 position: static（默认值）下完全无效。很多开发者给卡片加了 z-index: 2 却没加 position，结果层级毫无变化。
实操时注意：
- 只要用了
z-index，就必须同时声明position（relative、absolute或fixed） - 不要跨层比较：如果卡片嵌套在不同
position: relative的父容器里，它们的z-index是各自 stacking context 内部比较，不是全局排序 - 堆叠目标明确时，用小整数就够了（
z-index: 1~z-index: 4），避免写成999或9999，后期难覆盖
用 transform: translateY() 替代 top 更平滑且不影响布局计算
虽然 top 能实现偏移，但它仍参与盒模型计算（比如影响 margin-collapse 或父容器高度判断）。更现代、更安全的选择是 transform: translateY()：
-
transform触发独立图层，动画性能更好，尤其在 hover 动效中更流畅 - 它完全不改变文档流，不会导致父容器重排（reflow），响应式布局更稳定
- 示例写法：
transform: translateY(-6px);效果和top: -6px;类似，但更干净 - 注意：
transform不影响z-index排序逻辑，层级仍由z-index + position决定
hover 时提升最上层卡片需重置其他卡片的 z-index
单纯给当前卡片加 z-index: 99 不够——如果其他卡片的 z-index 是 4、3、2，它们依然可能挡住你。必须统一降级：
- 把所有卡片包裹进一个容器，用
:hover触发父容器状态，再用后代选择器重置子项层级 - 例如：
.card-stack:hover .card { z-index: 1; }，再单独给.card:hover设z-index: 10 - 别忘了搭配
transition: z-index 0.2s——虽然z-index本身不能过渡，但配合transform或opacity可做视觉缓冲
复杂点在于 stacking context 的嵌套边界——一旦某张卡片的父元素有 opacity: 0.99 或 will-change: transform，就可能意外创建新 stacking context，让 z-index 失效。这种隐性限制，往往要到多层卡片交互动画时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
