Owl Carousel头像图片无法超出父容器显示问题排查与修复

问题根源 #

你的头像被截断是因为最外层的.carousel-item设置了overflow:hidden，这个属性会直接裁剪所有超出该容器范围的内容——而你的头像通过top: -30px向上偏移后，顶部部分刚好超出.carousel-item的边界，所以被裁剪。另外，你未给头像容器设置z-index，可能导致它被其他元素遮挡。

修复步骤 #

1. 移除父容器的溢出裁剪 #

删掉.carousel-item上的overflow:hidden，让超出容器的头像部分正常显示：

<div class="carousel-item position-relative" data-bs-interval="10000">
  <div class="position-relative border border-primary">
    <img src="{{ asset('image/quote_frame.png')}}" class="w-100" alt="banner1" style="height: 300px; object-fit: cover; opacity:0.8"/>
    <div class="carousel-caption d-none d-md-block text-dark" style="width:80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <p>Some text here</p>
    </div>
  </div>
  <div class="position-absolute" style="top: -30px; left: 15px;">
    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
         class="rounded-circle shadow-2" alt="woman avatar" width="100"
         height="100">
  </div>
</div>

2. 给头像容器添加z-index #

给头像的绝对定位容器加上z-index，确保它显示在所有内容最上层：

<div class="position-absolute" style="top: -30px; left: 15px; z-index: 10;">
  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
       class="rounded-circle shadow-2" alt="woman avatar" width="100"
       height="100">
</div>

3. （可选）覆盖Owl Carousel默认样式 #

如果Owl Carousel的容器自带溢出裁剪样式，需添加CSS覆盖：

.owl-carousel .owl-item {
  overflow: visible !important;
}

修改完成后，头像就能完整显示在顶部，且不会被其他元素遮挡。

内容的提问来源于stack exchange，提问作者Lê Trung Hiếu