使用 CSS 部分重叠元素

Question

我想部分重叠多个 HTML 元素 - 比如说 DIV - 如下图所示。黑色边框的矩形（Hanafuda卡片）代表我想要重叠的元素。

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

理想情况下，我希望重叠的程度取决于有多少空间，以便在狭窄时元素会更多地聚集在一起，但这是次要的，我不介意使用 JS 来完成它。

Answer 1

您可以使用 flex 来实现这一点，使除最后一张卡之外的所有卡都调整到剩余空间

这是下面的一个小提琴：

.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>