Div overlay other divs in a flex container

Question

There is a container in which there is a flex container.

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

Now it looks like this:

Can the over div somehow be placed over all other divs, and the width of the content should be?

score 7 · Accepted Answer · answered May 05 '18 at 14:44

You can make the element position:absolute and stretch it to take the full width of .content. You may also use inline-flex so that the width of .content is equal to the width of its 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>

Div overlay other divs in a flex container

1 Answers1