Div overlay other divs in a flex container

This question already has an answer here:

How to overlay one div over another div 6 answers

---

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>

链接地址: http://www.djcxy.com/p/75844.html

上一篇: 将DIV堆叠在一起？

下一篇: Div在flex容器中覆盖其他div