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

Posted 2023-03-05

【中文标题】div覆盖flex容器中的其他div [重复]

【英文标题】：Div overlay other divs in a flex container [duplicate]

【发布时间】：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 之上，内容的宽度应该是？

【参考方案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>