如何仅用纯CSS（无JS）实现卡片列表的重叠堆叠效果

当前JS逻辑的核心是遍历同级卡片，按索引值给每张卡片叠加30px步长的上外边距，配合绝对定位实现逐层向下偏移的重叠效果。这套逻辑完全可以通过CSS原生能力替换，不需要依赖JS计算，以下是几个可直接落地的实现思路：

方案1：固定卡片数量的零闪烁实现 #

针对当前HTML中固定4张卡片的结构，直接通过nth-child选择器逐一定义偏移值，1:1复刻JS计算的结果：

• 首先给卡片父元素补上相对定位锚点，避免绝对定位的卡片脱离参考上下文
• 逐张匹配卡片的偏移量和层级，保证最上层的卡片层级最高，视觉上和原实现无差异

.card-group {
  position: relative;
  max-width: 400px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  border-radius: 8px;
}

/* 逐张匹配偏移量，和原JS计算的marginTop值完全一致 */
.card:nth-child(1) {
  margin-top: 0;
  z-index: 4;
}
.card:nth-child(2) {
  margin-top: 30px;
  z-index: 3;
}
.card:nth-child(3) {
  margin-top: 60px;
  z-index: 2;
}
.card:nth-child(4) {
  margin-top: 90px;
  z-index: 1;
}

/* 原有颜色类样式可直接复用，无需修改 */
.blue {
  background-color: cornflowerblue;
}
.green {
  background-color: darkolivegreen;
}
.red {
  background-color: lightcoral;
}
.orange {
  background-color: lightsalmon;
}

写完这套CSS后，可以完全删掉之前的window.load事件监听代码，页面加载时CSS会直接渲染出和之前一模一样的重叠效果，不存在JS计算带来的加载闪烁问题。

方案2：易调整步长的高性能实现 #

如果不想逐行计算每张卡片的偏移值，可以利用相邻兄弟选择器配合transform做线性偏移，调整步长时只需要修改一个固定值即可：

.card-group {
  position: relative;
  max-width: 400px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  border-radius: 8px;
}

/* 所有紧跟在前一张卡片后面的卡片，统一向下偏移30px */
.card + .card {
  transform: translateY(30px);
  z-index: 3;
}
/* 第三张卡片在基础偏移上再叠加30px */
.card + .card + .card {
  transform: translateY(60px);
  z-index: 2;
}
/* 第四张卡片继续叠加偏移 */
.card + .card + .card + .card {
  transform: translateY(90px);
  z-index: 1;
}

用transform做偏移比设置margin-top的渲染性能更好，不会触发布局重排，视觉效果和原实现完全一致。

补充：如果后续新增卡片数量不固定，只需要在CSS里继续叠加对应层级的相邻选择器规则即可，不需要额外写JS循环逻辑。

内容的提问来源于stack exchange，提问作者Paulo Künzel