如何实现Bootstrap栅格列重叠？是否需要使用offset类？

核心误区澄清 #

offset类无法实现列重叠效果。它的作用是在正常栅格流中给列添加侧向外边距、推动列的排布位置，过程中会预留对应宽度的空白占位，最终列与列之间是完全相邻排布的，不会产生图层压盖的重叠视觉，没法实现目标效果。

实现逻辑 #

要实现无占位的列重叠效果，核心是通过定位或者负边距，让需要叠在上方的列脱离正常文档流的占位约束，压在相邻列的图层之上。

具体实现步骤 #

结合现有代码，只需要两处调整就能达到参考效果：

1. 给承载两个列的父级row添加相对定位（Bootstrap内置position-relative类可以直接用），作为内部绝对定位元素的位置参考边界，避免元素随机偏移到页面其他位置。
2. 给需要叠在上方的短列设置绝对定位，配合位置偏移值调整到目标重叠位置即可。
   调整后的完整可运行代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- 给row添加相对定位，作为定位参考容器 -->
  <div class="row position-relative">
    <!-- 橙色长列：保持正常文档流，作为底层元素 -->
    <div class="col-3 offset-3" style="background-color: orange; height: 200px;">
      <img src="#" class="img-fluid">
    </div>
    <!-- 蓝色短列：设置绝对定位，叠在橙色列上方 -->
    <div class="col-3 position-absolute" style="background-color: blue; height: 100px; top: 100px; left: 0;">
      <p>Some text</p>
    </div>
  </div>
</div>

效果调整说明 #

• 垂直方向重叠程度：通过修改绝对定位元素的top或bottom值调整。上面的示例中top:100px，刚好让高度100px的蓝色列从橙色列一半高度的位置开始排布，完全叠在橙色列的下半部分。
• 水平方向重叠程度：通过修改left或right值调整，比如把left: 2rem改成left: -2rem，就能减少两个列的水平重叠范围。
• 轻量替代方案：如果不想用绝对定位，也可以给需要叠的列添加负边距（比如margin-left: -48px），把列往相邻方向拉实现重叠。但这种方式会占用文档流位置、影响后续元素的排布，简单场景可以用，复杂布局下优先选绝对定位的方式，对其他元素的布局干扰更小。

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