Bootstrap卡片Hover放大被Carousel遮挡问题求助

问题核心 #

网页元素的堆叠顺序由z-index属性控制，你的轮播组件默认堆叠层级高于卡片，导致卡片放大后被上方的轮播遮挡。

解决方案 #

给卡片添加定位属性（z-index仅对定位元素生效）和更高的z-index值，确保卡片Hover放大时处于轮播组件上层：

修改后的CSS代码 #

.nav-item:hover {
  background: darkgrey;
}

.dropdown-item:hover {
  background: darkgrey;
}

.carousel-inner img {
  height: 500px;
}

.cardsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.card:hover {
  transform: scale(2);
  transition: 0.5s ease-in-out; /* 把原5秒过渡调整为更合理的0.5秒，动画更流畅 */
}

.card {
  margin: 1em;
  position: relative; /* 开启定位，让z-index生效 */
  z-index: 10; /* 设置高于轮播的堆叠层级，Bootstrap轮播默认z-index为1 */
}

完整可运行代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<div id="carouselExample" class="carousel carousel-dark slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-1" class="d-block w-100" alt="Pidgeot">
    </div>
    <div class="carousel-item" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-2" class="d-block w-100" alt="Sceptile">
    </div>
    <div class="carousel-item" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-3" class="d-block w-100" alt="Charizard">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<div class="cardsContainer">
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/blue/white?text=Slide-1" class="card-img-top" alt="Gyarados card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/orange/white?text=Slide-2" class="card-img-top" alt="Altaria card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/green/white?text=Slide-3" class="card-img-top" alt="Lucario card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/purple/white?text=Slide-4" class="card-img-top" alt="Suicune card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

关键说明 #

• position: relative：必须添加，否则z-index属性无法生效
• z-index: 10：设置比轮播默认层级更高的值，确保卡片始终显示在轮播上方
• 过渡时间调整：原5秒过渡过长，改为0.5秒让动画更自然

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