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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS实现卡片堆叠遮挡效果教程》，聊聊，希望可以帮助到正在努力赚钱的你。

实现卡片堆叠与遮挡效果需使用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学习网公众号也会发布文章相关知识，快来关注吧！