Div 覆盖 Flex 容器中的其他 div

Question

有一个容器，其中有一个弹性容器。

超文本标记语言

<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 之上，并且内容的宽度应该是吗？

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>