Bootstrap Carousel文本遮挡问题求助：定位与z-index设置无效

问题出在你给.carousel-item设置了z-index: -1，这会把整个轮播项容器的层级拉到父元素下方，导致内部的绝对定位文本即使设置了高z-index，也会被轮播容器的背景或其他元素遮挡。

修正步骤： #

1. 移除.carousel-item的z-index: -1：保留position: relative即可，绝对定位子元素只需要父级是相对定位来确定坐标，不需要降低父级层级。
2. 优化文本定位样式：给.carousel-hope添加定位属性，让文本显示在轮播图的合适位置（比如居中），同时设置合理的z-index。

修正后的CSS代码： #

.carousel {
  height: 500px;
  background-color: #ef8172;
}

.carousel-item {
  position: relative;
  height: 100%; /* 让轮播项占满容器高度，方便文本居中 */
}

.carousel-hope {
  position: absolute;
  z-index: 10; /* 只需高于轮播内部默认元素层级即可 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现文本垂直水平居中 */
  color: #fff; /* 可选，让文本在深色背景上更清晰 */
  text-align: center;
  width: 80%; /* 限制文本宽度，避免超出屏幕 */
}

修正后的HTML代码（修复原代码的语法错误）： #

<section id="testimonial">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <!-- 轮播指示器 -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <!-- 轮播内容容器 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="carousel-hope">
          <h2 class="messege">sknff shdfhhcsndfa sbvncsuhf snhfvusdhv sajlfsanvfho</h2>
        </div>
      </div>
      <div class="carousel-item">
        <div class="carousel-hope">
          <h2 class="messege">sknff shdfhhcsndfa sbvncsuhf snhfvusdhv sajlfsanvfho</h2>
        </div>
      </div>
      <div class="carousel-item">
        <div class="carousel-hope">
          <h2 class="messege">sknff shdfhhcsndfa sbvncsuhf snhfvusdhv sajlfsanvfho</h2>
        </div>
      </div>
    </div>
    <!-- 轮播控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</section>

原理说明： #

• z-index的层级是相对于最近的已定位父元素生效的，如果你给父元素.carousel-item设置了z-index: -1，那么子元素的z-index再高，也只能在这个父元素的层级范围内，无法突破到父元素上方。
• 移除父元素的负z-index后，子元素的z-index可以正常覆盖轮播内部的其他元素（比如轮播指示器、控制按钮的z-index默认在10左右，所以设置10足够）。

内容的提问来源于stack exchange，提问作者varun teja komirishetti