Div覆盖其他Flex容器中的div

Question

有一个容器，其中包含一个flex容器。

HTML

<div class="container">
  <div class="content">
    <div class="over">Over</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
</div>

CSS

.container {
  background-color: yellow;
  width: 500px;
}
.content {
  display: flex;
}
.over {
  background-color: rgba(255, 0, 0, 0.8);
}

现在看起来是这样的：

可以将上面的div置于所有其他div的上方，这样内容的宽度就可以调整了。

- Harrix

Answer 1

您可以将元素position:absolute，并将其拉伸到占据整个.content的宽度。您也可以使用inline-flex，这样.content的宽度就等于其内容的宽度：

.container {
  background-color: yellow;
  width: 500px;
}

.content {
  display: inline-flex;
  position:relative;
}

.over {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(255, 0, 0, 0.8);
}

<div class="container">
  <div class="content">
    <div class="over">Over</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
</div>

- Temani Afif