如何强制 css 网格项相互重叠？

Question

我有一排 5 列，每列都有一个带有一些文本的红色框。当用户向侧面缩小屏幕时，我希望容器向侧面缩小，并且希望这些框开始相互重叠，以便框中的文本仍然完全可见。 不知道如何实现这一点，我尝试将框的侧边距更改为负值，但这似乎效果不太好。

.container {
  width: 100%;
  height: 100px;
  border: 1px solid brown;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.playerRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  
  display: flex;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 0.45em;
}

.playerBox {
  width: 150px;
  height: 100px;
  background-color: red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.playerBox:nth-child(1),
.playerBox:nth-child(3),
.playerBox:nth-child(5)
{
  align-items: flex-end;
}

<div class="container">
  <div class="playerRow">
    <div class="playerBox onTop">user 1 ahhahah</div>
    <div class="playerBox onTop">user 2 ahhahah</div>
    <div class="playerBox onTop">user 3 ahhahah</div>
    <div class="playerBox onTop">user 4 ahhahah</div>
    <div class="playerBox onTop">user 5 ahhahah</div>
  </div>
</div>

https://codepen.io/MH-123/pen/vYMJoZR

Answer 1

一种方法是计算每个框的位置并将它们绝对定位。

这是一个简单的例子。

.container {
  width: 100%;
  height: 100px;
  border: 1px solid brown;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.playerRow {
  width: 100vw;
  position: relative;
  height: 100px;
  --gap: calc((100vw - (5 * 150px)) / 10);
}

.playerBox {
  width: 150px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: calc((var(--n) - 1) * 20%);
  left: calc((var(--gap) * var(--n)) + ((var(--n) - 1) * (150px + var(--gap))));
}

.playerBox:nth-child(1) {
  --n: 1;
}

.playerBox:nth-child(2) {
  --n: 2;
}

.playerBox:nth-child(3) {
  --n: 3;
}

.playerBox:nth-child(4) {
  --n: 4;
}

.playerBox:nth-child(5) {
  --n: 5;
}

.playerBox:nth-child(1),
.playerBox:nth-child(3),
.playerBox:nth-child(5) {
  align-items: flex-end;
}

<div class="container">
  <div class="playerRow">
    <div class="playerBox onTop">user 1 ahhahah</div>
    <div class="playerBox onTop">user 2 ahhahah</div>
    <div class="playerBox onTop">user 3 ahhahah</div>
    <div class="playerBox onTop">user 4 ahhahah</div>
    <div class="playerBox onTop">user 5 ahhahah</div>
  </div>
</div>

当视口宽度变得太小且重叠对文本干扰太大时，您可能需要重新设置宽度（小于 150 像素）。