如何将下面的 div 放在另一个 div 中(在两者之间重叠另一个 div)?

Question

现在我可以把ABCdiv放在右边，但在Bodydiv下面。如何将 ABCdiv 放在标题div 下方？需要重叠。

<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;margin-left:auto">ABC</div>
</div>

Answer 1

我添加了 2 个答案。 第一个用于外部样式表，第二个用于内联样式(就像您编写代码的方式一样(。

首先，不要使用内联样式。如果可能，请始终使用外部样式表。

现在，对于您的问题，请为父母使用relative位置，为孩子使用absolute。在这种情况下，父级是您的主要容器，子级是 ABCdiv。

试试这个：

#container {
width: 500px;
margin: 0 auto;
position: relative;
}
.header {
background-color:yellow;
height:100px
}
.body {
background-color:aquamarine;
height: 400px;
}
.abc {
background-color:red;
width:100px;
position: absolute;
top: 100px;
right: 0;
}

<div id="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="abc">ABC</div>
</div>

解释：

由于您的.header为 100px，您可以将.abc设置为top: 100px;并将right: 0设置为将其移动到父级中的最右侧，因为.abc绝对位于其父级。

如果只允许您使用内联样式，请尝试以下操作：

<div style="width:500px;margin:0 auto;position:relative;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;position:absolute;top:100px;right:0;">ABC</div>
</div>

Answer 2

我添加了 float：将 ABCdiv 放置在 BODYdiv 上(重叠(的权利，并交换了div BODY 和 ABC 的位置

<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:red;width:100px;float: right;">ABC</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
</div>

转到 https://www.w3schools.com/css/css_positioning.asp 了解更多信息

Answer 3

要制作布局，您可以使用弹性框实用程序。这是最常见，也可能是最简单的布局方法。

我希望这是你需要的。

有关更多信息，请查看文档

*,
*::before,
*::after {
box-sizing: border-box;
}
.container-fluid{
width:100%;
}
header{
width:100%;
height:100px;
background:yellow
}
.row{
display:flex;
flex-wrap:wrap;
}
.col-left{
width:100%;
flex:0 0 75%;
max-width:75%;
background:blue;
height:100px
}
.col-right{
width:100%;
flex:0 0 25%;
max-width:25%;
background:red;
}

<div class="container-fluid">
<header></header>
<div class="row">
<div class="col-left"></div>
<div class="col-right"></div>
</div>
</div>