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

想要实现精美的卡片堆叠遮挡效果吗？本文将为你提供一份详细的CSS教程，教你如何利用CSS定位和z-index属性轻松打造出具有视觉层次感的卡片堆叠效果。通过相对定位和绝对定位的巧妙结合，配合z-index层级控制，让你的卡片以前后遮挡的方式呈现，更具立体感。我们还将深入探讨如何运用box-shadow阴影、transform旋转缩放等技巧，进一步增强视觉效果，并实现hover时的动态交互，让你的卡片堆叠效果更加生动有趣。无论你是前端新手还是经验丰富的开发者，都能从本文中获得实用的技巧和灵感，快来学习吧！

实现卡片堆叠与遮挡效果需使用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学习网公众号！