实现卡片重叠效果需先设置父容器为relative定位，再将子卡片设为absolute定位并用top、left调整位置，通过z-index控制层级顺序，数值大的覆盖在上方，配合阴影和边框增强层次感，适用于推荐内容或时间轴布局。
要实现卡片重叠效果，关键在于使用 position: absolute 控制元素位置，配合 z-index 调整堆叠顺序。只要父容器设置为 relative，内部绝对定位的卡片就能自由摆放并相互覆盖。
1. 设置父容器为 relative 定位
重叠效果通常需要一个共同的容器作为参考点。给父元素设置 position: relative，这样内部的 absolute 元素会以它为定位基准。
示例：.card-container {
position: relative;
width: 300px;
height: 200px;
}
2. 使用 absolute 定位卡片
将每个卡片设为 position: absolute，然后通过 top、left 等属性控制位置，让它们出现在同一区域，形成重叠。
示例：.card {
position: absolute;
width: 200px;
height: 120px;
padding: 16px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card:nth-child(1) {
top: 20px;
left: 20px;
}
.card:nth-child(2) {
top: 50px;
left: 60px;
}
3. 用 z-index 控制层级顺序
z-index 决定谁在上面。数值越大，越靠前。确保后面的卡片有更高的 z-index 值，避免被遮挡。
立即学习“前端免费学习笔记（深入）”；
示例：- 第一个卡片 z-index: 1
- 第二个卡片 z-index: 2（显示在上层）
.card:nth-child(1) {
z-index: 1;
}
.card:nth-child(2) {
z-index: 2;
}
4. 实际应用场景建议
这种布局适合展示推荐内容、轮播卡片或时间轴事件。注意：
基本上就这些。absolute 定位提供灵活摆放，z-index 解决遮挡问题，两者结合轻松做出视觉丰富的重叠卡片效果。不复杂但容易忽略细节。
