将 div 放在 bootstrap 中的另一个 div 之上

Question

我想知道如何将一个 div 放在另一个 div 之上。

这就是我想要的前后

<div class="col-md-12 container">

     <div class="col-md-12"> box1 </div>

     <div class="col-md-12"> box2 </div>

</div>

Answer 1

您必须将position-absolute类添加到最后一列及position-relative其父级row.col:first-of-type {&nbsp; background: red}.col:last-of-type {&nbsp; border: green solid}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="container">&nbsp; <div class="row position-relative">&nbsp; &nbsp; <div class="col"> box1 </div>&nbsp; &nbsp; <div class="col position-absolute"> box2 </div>&nbsp; </div></div>

Answer 2

<div class="container">&nbsp;<div class="row position-relative">&nbsp; &nbsp;<div class="col-md-4 box1"> box1 </div>&nbsp; &nbsp;<div class="col-md-4 box2 position-absolute"> box2 </div>&nbsp;</div></div>&nbsp; &nbsp; &nbsp; &nbsp; .box1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .box2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 3px;&nbsp; &nbsp; &nbsp; &nbsp; }