div覆盖flex容器中的其他div [重复]

【问题标题】：Div overlay other divs in a flex container [duplicate]div覆盖flex容器中的其他div [重复]
【发布时间】：2018-10-15 20:50:31
【问题描述】：

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

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：