如何使用 Bootstrap 或 CSS 将容器 div 覆盖在另一个容器上

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

这是一个直接的 CSS 解决方案，仅使用absolute-positioned 元素内的relative-positioned 元素。和topstyleleft属性确定容器 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>