根本原因是父容器未设position: relative，导致子卡片均相对于body定位而重叠；必须为直接父元素设置relative/absolute以建立定位参考系，并用top/left配合z-index实现错开。
用 position: absolute 叠卡片时，错开效果出不来？
根本原因通常是父容器没设 position: relative，导致所有子卡片都相对于 body 定位，挤在左上角。绝对定位不是“随便移”，它需要一个明确的参考系。
必须确保卡片的直接父元素（比如 .card-container）有 position: relative 或 position: absolute —— 否则 top/left 会失效或行为不可控。
另外，margin 在 position: absolute 元素上依然生效，但它作用在「已定位后的最终位置」上，容易和 top/left 冲突，建议优先用 top/left 控制偏移，margin 留给微调或内边距逻辑。
z-index 不起作用？检查这三点
z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）生效，且只在同一个层叠上下文（stacking context）内比较。常见失效点：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
opacity: 0.99、transform、filter等属性 → 自动创建新层叠上下文，子元素的z-index只在这个内部比大小 - 卡片没写
position，光写z-index没用 - 多个卡片的
z-index值相同，浏览器按 HTML 顺序渲染，后写的盖前面的 —— 这时候得手动设不同值，比如z-index: 1、z-index: 2、z-index: 3
错开叠加的实操写法（带示例）
推荐用 top 和 left 配合递增的 z-index，结构清晰、可控性强。避免用 margin-left + margin-top 模拟错位，那在响应式下容易崩。
.card-container {
position: relative;
width: 300px;
height: 400px;
}
.card {
position: absolute;
width: 260px;
height: 360px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card:nth-child(1) {
top: 0;
left: 0;
z-index: 1;
}
.card:nth-child(2) {
top: 16px;
left: 16px;
z-index: 2;
}
.card:nth-child(3) {
top: 32px;
left: 32px;
z-index: 3;
}
如果卡片数量动态生成（比如 Vue/React 渲染），就用内联样式或 CSS 变量传入偏移量，别硬写死 :nth-child。
移动端适配和性能注意点
错开叠加在小屏上容易超出视口，尤其 left 偏移大时。建议加媒体查询收缩偏移量：
比如：@media (max-width: 480px) { .card:nth-child(2) { left: 8px; top: 8px; } }
另外，大量使用 position: absolute 且频繁动画（如 hover 移动）可能触发重排。若要做交互动画，优先用 transform: translate() 替代 top/left，它走合成层，更流畅。
错开的本质是视觉层次模拟，不是布局需求 —— 所以别把它当网格系统用；真要响应式排列，该用 grid 或 flex 的时候，就别硬套 absolute。
