CSS卡片堆叠遮挡效果实现教程

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS实现卡片堆叠遮挡效果教程》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

实现卡片堆叠与遮挡效果需使用CSS定位与z-index层级控制，通过相对定位容器包裹绝对定位卡片，设置递增的z-index值使后层卡片前置，配合left、top偏移形成重叠，再利用box-shadow投影、transform旋转缩放及hover时提升层级并放大，增强视觉层次与交互感。

实现卡片堆叠与遮挡效果，关键在于利用 CSS 的定位（position）和层级控制（z-index），配合适当的偏移和阴影增强视觉层次。以下是具体实现方法。

1. 基础结构与定位

使用相对定位容器包裹多个绝对定位的卡片元素，使它们可以重叠排列。

<div class="stack">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>
  

为容器设置相对定位，卡片使用绝对定位并统一偏移，形成堆叠基础。

2. 控制堆叠顺序（z-index）

通过 z-index 设置每张卡片的显示层级，数值越大越靠前。可逐级递减，让前面的卡片遮挡后面的。

CSS 示例：

.stack {
  position: relative;
}
.card {
  position: absolute;
  width: 180px;
  height: 240px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card:nth-child(1) {
  left: 10px; top: 10px; z-index: 1;
}
.card:nth-child(2) {
  left: 20px; top: 20px; z-index: 2;
}
.card:nth-child(3) {
  left: 30px; top: 30px; z-index: 3;
}
  

3. 添加视觉层次感

通过以下方式增强真实堆叠感：

• 阴影（box-shadow）：每张卡片添加轻微投影，模拟立体感
• 偏移渐进：后层卡片偏移更多，形成深度错觉
• 缩放或旋转：可用 transform 稍微旋转卡片，更像真实堆叠

例如给最后一张加一点旋转：

.card:last-child {
  transform: rotate(-5deg);
}
  

鼠标悬停时还可动态提升某张卡片层级：

.card:hover {
  z-index: 10;
  transform: scale(1.05) rotate(0deg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
  

理论要掌握，实操不能落！以上关于《CSS卡片堆叠遮挡效果实现教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！