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);
}

现在看起来像这样：

over div可以以某种方式放在所有其他div上，内容的宽度应该是吗？

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>