如何用CSS实现钱包Div部分重叠：1个完全显示，3个部分可见

需求说明 #

一个钱包完全显示在顶部，另外三个钱包互相重叠且每个的顶部区域可见。

完整HTML结构（建议添加父容器便于定位） #

<div class="wallet-container">
  <div id="main-wallet" class="wallet-config">
    <p class="wallet-name">Wallet Haushalt</p>
    <p class="wallet-balance positive-balance">500,85 €</p>
  </div>
  <div id="wallet2" class="wallet-config">
    <p class="wallet-name">Wallet Einkauf</p>
    <p class="wallet-balance positive-balance">56,11 €</p>
  </div>
  <div id="wallet3" class="wallet-config">
    <p class="wallet-name">Wallet Gehalt</p>
    <p class="wallet-balance positive-balance">8.053,75 €</p>
  </div>
  <div id="wallet4" class="wallet-config">
    <p class="wallet-name">Wallet Sohn</p>
    <p class="wallet-balance negative-balance">-42,45 €</p>
  </div>
</div>

CSS实现代码 #

/* 父容器设置相对定位，作为子元素绝对定位的参考 */
.wallet-container {
  position: relative;
  width: 280px; /* 可根据实际需求调整钱包宽度 */
  margin: 20px;
}

/* 基础钱包样式 */
.wallet-config {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 主钱包完全显示，层级最高 */
#main-wallet {
  position: relative;
  z-index: 4;
}

/* 重叠钱包的定位设置 */
#wallet2 {
  position: absolute;
  top: 45px; /* 偏移距离控制重叠程度 */
  left: 0;
  z-index: 3;
  width: 100%;
}

#wallet3 {
  position: absolute;
  top: 90px;
  left: 0;
  z-index: 2;
  width: 100%;
}

#wallet4 {
  position: absolute;
  top: 135px;
  left: 0;
  z-index: 1;
  width: 100%;
}

/* 余额样式（可选，保持原有视觉效果） */
.positive-balance {
  color: #2ecc71;
  font-weight: bold;
}

.negative-balance {
  color: #e74c3c;
  font-weight: bold;
}

方案说明 #

1. 父容器相对定位：确保重叠的钱包绝对定位时以该容器为基准，避免页面布局混乱。
2. 层级与偏移控制：主钱包z-index最高，保持完全显示；另外三个钱包依次降低z-index，同时递增top偏移量，让每个钱包的顶部区域露出在前面钱包的下方，实现重叠且可见的效果。
3. 自定义调整：可根据设计需求修改top偏移量、钱包宽度、阴影、边框样式等参数，优化视觉效果。如果需要横向错位，可给每个重叠钱包添加不同的left值（如left: 10px）。

内容的提问来源于stack exchange，提问作者schmartinn