html - 使用 CSS 部分重叠元素

Question

我想部分重叠多个 HTML 元素(比如 DIV)，如下图所示。黑边矩形(Hanafuda 卡片)代表我想要重叠的元素。

使用 Javascript 我确信我可以想出一些办法，但我想知道是否有纯 CSS 解决方案。我考虑过相对定位，但问题是每张卡片都需要沿 x 轴越来越大的偏移量。

理想情况下，我希望重叠的程度取决于有多少空间，这样元素在拥挤时会更加拥挤，但这是次要的，我不介意使用 JS 来实现它。

Answer 1

您可以使用 flex 实现这一点，使除最后一张以外的所有卡片都适应剩余空间

这是一个fiddle以下:

.container {
  display: flex;
  width: 300px;
}
.card-container {
  flex: 1 0 0;
  overflow-x: hidden;
}
.card-container:last-child {
  flex: 0 0 auto;
}
.card {
  background: linear-gradient(to right, #ccc 0%, #444 100%);
  width: 100px;
  height: 150px;
}

<div class="container">
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
  <div class="card-container">
    <div class="card"></div>
  </div>
</div>