<分区>
html - Div 覆盖 flex 容器中的其他 div
有一个容器，里面有一个 flex 容器。
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 之上，内容的宽度应该是多少？
最佳答案
您可以使元素 position:absolute 并拉伸(stretch)它以占据 .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>关于html - Div 覆盖 flex 容器中的其他 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50190632/