如何使用Bootstrap或CSS

Question

---

我使用Bootstrap 4设计了一个布局，其中容器b紧邻容器A。但是我希望容器B覆盖容器A的某些部分，如图所示。 如何实现这种布局？任何帮助或参考，将不胜感激。

  <!-- container A -->
        <div class="container-fluid">
         <div class="row text-center">
            <div class="col-12">
              <h4>HOW IT WORKS</h4>
            </div>
          </div>
        
          <div class="row text-center">
            <div class="offset-md-2 col-md-2 px-0">
                <div class="card">
                    <div class="card-header">
                      card 1 title
                    </div>
                    <div class="card-body">
                       card 1 body
              
                    </div>
                  </div>
            </div>
            <div class="offset-md-1 col-md-2">
              <div class="card">
                    <div class="card-header">
                      card 2 header
                    </div>
                    <div class="card-body">
                        card 2 body
                    </div>
                  </div>
            </div>
            <div class="offset-md-1 col-md-2">
                <div class="card">
                    <div class="card-header">
                      card 3 header
                    </div>
                    <div class="card-body">
                      card 4 body
                    </div>
                  </div>
            </div>

          </div>
        </div>

        <!-- container B -->

        <div class="container rounded-border">
          <div class="row">
            <div class="col-12 text-center">
              <h4 class="display-4">What is Lorem Ipsum</h4>
              <p>
              ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includin
              </p>
            </div>
           
          </div>
        </div>

Answer 1

在容器B上使用绝对定位并找到所需的位置，然后在同一容器上使用z-index并将其设置为1。这会将元素B“叠加”在元素A的顶部。

z-index： https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

这是一个纯CSS解决方案，仅在absolute位置的元素内使用relative位置的元素。 top和left样式属性确定容器B相对于其父div出现的位置。

#outerContainer{
  position: relative;
}
#containerA{ 
    height: 100px;
    width: 500px;
    border: solid 1px gray; 
}
#containerB{
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 300px;
  z-index: 1;
  background-color: maroon;
  color: white;
  border: solid 1px gray;
}
#rest-of-page{
  height: 100px;
  width: 500px;
  border: solid 1px gray;
}

<div id="outerContainer">
  <div id="containerA">Container A</div>
  <div id="containerB">Container B</div>
  <div id="rest-of-page">(Rest of Page)</div>
</div>