如何使用Bootstrap 4实现Div元素重叠效果？

Bootstrap 4.6.2的作用 #

完全可以帮你实现这种元素重叠效果，而且它的内置定位、布局类能帮你避免手动调整top属性的麻烦，让布局更灵活、自适应内容高度变化。

现有代码的问题 #

你当前用固定top: 44%来定位文本容器，当文本或容器高度变化时必须手动修改这个值，不够灵活，也不符合响应式布局的要求。

优化后的实现方案 #

下面是利用Bootstrap内置类优化后的代码，无需手动调整top，内容高度变化时会自动适配：

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section id="main_content">
  <div class="container mt-5">
    <div class="row justify-content-end">
      <!-- 父容器：用position-relative确定定位基准，d-flex让图片靠右 -->
      <div class="col-md-12 position-relative d-flex justify-content-end">
        <!-- 文本容器：用Bootstrap的position-absolute + translate-middle-y实现自动垂直居中，无需手动设置top -->
        <div class="text-container position-absolute left-0 top-50 translate-middle-y w-75 z-index-2 border border-danger rounded p-4">
          <div class="col-md-8">
            <h2 class="text-danger">Profitez d'un accompagnement et de coaching personnalisé</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non est vitae nulla porttitor fringilla id eu dui. Donec eget cursus ex. Maecenas bibendum sodales augue.</p>
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Bloc de 1 heure <span>&#x2192;</span>
              </a>
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Bloc de 3 heures <span>&#x2192;</span>
              </a>
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Bloc de 5 heures <span>&#x2192;</span>
              </a>
            </div>
          </div>
        </div>
        
        <!-- 图片：用Bootstrap的ml-auto替代margin-left:auto，w-50设置宽度，mt-3调整间距 -->
        <img src="https://via.placeholder.com/600x400" alt="Coaching Image" class="img-fluid rounded z-index-1 w-50 mt-3">
      </div>
    </div>
  </div>
</section>

CSS代码（仅保留Bootstrap未覆盖的自定义样式）

/* 自定义z-index，Bootstrap 4没有内置z-index类，需要自己定义 */
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}

/* 自定义列表项样式，覆盖Bootstrap默认 */
.list-group-item {
  border-bottom: 1px solid black;
}
.list-group-item:last-child {
  border-bottom: none;
}
a.list-group-item:hover {
  color: #000;
}

优化点说明 #

• 用Bootstrap的position-absolute、top-50、translate-middle-y替代手动设置top和transform，实现文本容器自动垂直居中，内容高度变化时无需手动调整。
• 利用Bootstrap的w-75、w-50设置宽度，替代自定义的width:75%和width:50%，更符合Bootstrap的设计规范。
• 移除了重复的样式定义（比如你之前重写的border-danger、text-danger，Bootstrap已经内置这些类，直接使用即可）。
• 用ml-auto替代margin-left:auto，统一使用Bootstrap的间距类。

效果优势 #

• 无需手动调整top值，文本或容器高度变化时自动保持垂直居中。
• 代码更简洁，复用Bootstrap内置类，减少自定义CSS的维护成本。
• 布局更响应式，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Daniel Ringuet