在Bootstrap中将一个div放在另一个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>

- JacobBrown2019

Answer 1

你需要将 position-absolute 类添加到最后一列，position-relative 添加到其父项 row。

.col:first-of-type {
  background: red
}

.col:last-of-type {
  border: green solid
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row position-relative">
    <div class="col"> box1 </div>
    <div class="col position-absolute"> box2 </div>
  </div>
</div>

- dippas

Answer 2

<div class="container">
 <div class="row position-relative">
   <div class="col-md-4 box1"> box1 </div>
   <div class="col-md-4 box2 position-absolute"> box2 </div>
 </div>
</div>

        .box1 {
          width: 100%;
          height: 100px;
          background: red;
          border-radius: 25px;
          text-align: center;
        }
        .box2 {
           width: 100%;
          height: 100px;
          background: green;
          border-radius: 25px;
          top: 10px;
          text-align: center;
          left: 3px;
        }

- Jyoti Joshi