使用纯 CSS 对卡片的重叠效果答案

【问题标题】：Overlaping Effect on Cards with Pure CSS使用纯 CSS 对卡片的重叠效果
【发布时间】：2021-04-19 10:44:21
【问题描述】：

我正在处理与此示例类似的卡片列表：https://codepen.io/pkunzel/pen/xxgjrVg

window.addEventListener("load", function() {
  let cards = document.querySelectorAll(".card");
  for (let i = 0; i < cards.length; i++) {
    cards[i].style.marginTop = (i * 30) + "px";
  }
});

.card {
  position: absolute;
}

.blue {
  background-color: cornflowerblue;
}

.green {
  background-color: darkolivegreen;
}

.red {
  background-color: lightcoral;
}

.orange {
  background-color: lightsalmon;
}

<div class="card-group">
  <div class="card blue">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card red">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card green">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card orange">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
</div>

但是在完成它之后，我无法摆脱纯粹使用 CSS 可以实现的感觉，我只是想不出如何以不同的方式实现它。有什么建议吗？

【问题讨论】：

标签： css

【解决方案1】：

CSS 网格可以做到：

.card-group {
  display:grid;
  justify-content:start; /* fit content in width */
  grid-auto-rows:30px; /* a fixed height to create an overflow */ 
}
.card-group .card {
  align-self:start; /* disable the stretch alignment */
}
.blue {
  background-color: cornflowerblue;
}

.green {
  background-color: darkolivegreen;
}

.red {
  background-color: lightcoral;
}

.orange {
  background-color: lightsalmon;
}

<div class="card-group">
  <div class="card blue">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card red">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card green">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card orange">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
</div>

【讨论】：

简单又聪明！谢谢
嘿 Temani，你能看看这个问题吗？...我正在使用上面的代码来实现类似的功能，但是在尝试将 div 放置在 div 下方时遇到问题（显示：网格）stackoverflow.com/questions/70491305/…

【解决方案2】：

您可以使用 css-variables 执行类似的操作：

:root {
  --mt: 30px;
}

.card {
  position: absolute;
}

.blue {
  background-color: cornflowerblue;
}

.red {
  background-color: lightcoral;
  margin-top: var(--mt);
}

.green {
  background-color: darkolivegreen;
  margin-top: calc(var(--mt)*2);
}

.orange {
  background-color: lightsalmon;
  margin-top: calc(var(--mt)*3);
}

<div class="card-group">
  <div class="card blue">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card red">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card green">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card orange">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
</div>

【讨论】：

谢谢，但它必须适用于未定义数量的项目。我相信与容器相关的位置可能是要走的路。那里只是缺少一些东西..
确实如此。对于超过 3 或 4 个项目，这可能不是一个好的解决方案

【解决方案3】：

我更喜欢这种方式，只需在卡片前添加.card-wrapper并指定card-wrapper的高度，然后卡片就会被堆叠起来。

这里是我的fiddle

<div class="card-group">
  <div class="card-wrapper">
     <div class="card blue">
      <p>Name: qwert</p>
      <p>Age: 99</p>
      <p>Address: qwertyuil</p>
    </div>
  </div>
  
  <div class="card-wrapper">
    <div class="card red">
      <p>Name: qwert</p>
      <p>Age: 99</p>
      <p>Address: qwertyuil</p>
    </div>
  </div>
  <div class="card-wrapper">
    <div class="card green">
      <p>Name: qwert</p>
      <p>Age: 99</p>
      <p>Address: qwertyuil</p>
    </div>
  </div>
  <div class="card-wrapper">
    <div class="card orange">
      <p>Name: qwert</p>
      <p>Age: 99</p>
      <p>Address: qwertyuil</p>
    </div>
  </div>
</div>

.card-wrapper{
  height: 10px;
  width: fit-content;
}
.card-wrapper:hover{
  height: 150px;
}
.card {
  position: absolute;
}

.blue {
  background-color: cornflowerblue;
}

.green {
  background-color: darkolivegreen;
}

.red {
  background-color: lightcoral;
}

.orange {
  background-color: lightsalmon;
}

【讨论】：