如何将div放在另一个div的下面（重叠另一个div）？

Steve 发表于 Dev

106

史蒂夫

现在，我可以将ABC div放在右侧但在Body div下方。如何将ABC div放在标题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>

戈西亚

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

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

现在，对于您的问题，将relative位置用于父母和absolute孩子。在这种情况下，父级是您的主要容器，子级是该ABC div。

尝试这个：

#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。