当 Bootstrap 卡片在悬停时使用 transform: scale() 放大，却因层叠顺序（z-index）不足而被上方轮播图遮盖时，需显式提升其堆叠上下文，关键在于为 .card:hover 设置足够高的 z-index 并确保父容器不产生限制性层叠上下文。
当 bootstrap 卡片在悬停时使用 `transform: scale()` 放大，却因层叠顺序（z-index）不足而被上方轮播图遮盖时，需显式提升其堆叠上下文，关键在于为 `.card:hover` 设置足够高的 `z-index` 并确保父容器不产生限制性层叠上下文。
在 Bootstrap 布局中，轮播图（.carousel）默认具有较高的层叠层级（通常由 z-index: 2 或更高设定），而普通卡片（.card）作为静态文档流元素，其默认 z-index: auto 无法在悬停缩放时自动跃升至顶层。即使应用了 transform: scale(2)，该变换本身不会创建新的层叠上下文，除非同时满足以下任一条件：
- 元素设置了非
auto的z-index（且其定位为relative/absolute/fixed）； - 或元素具有
transform+will-change: transform等触发硬件加速的属性（但不可靠）。
因此，仅添加 z-index 是必要且最直接的修复方式。但需注意：z-index 只对已定位元素（即 position 不为 static）生效。Bootstrap 的 .card 默认 position: static，故必须同步添加 position: relative 才能使 z-index 生效。
✅ 正确的 CSS 修正如下：
.card {
position: relative; /* 关键：启用 z-index */
margin: 1em;
transition: transform 0.4s ease-in-out, z-index 0.4s; /* 推荐平滑过渡 */
}
.card:hover {
transform: scale(1.3); /* 建议适度放大（如 1.3x），避免过度位移 */
z-index: 9999; /* 显著高于 carousel（Bootstrap 5 中 carousel 默认 z-index: 2） */
}⚠️ 注意事项：
-
避免
!important：原答案中使用z-index: 9999 !important虽可临时生效，但违背 CSS 可维护性原则。应通过提高选择器特异性或调整样式加载顺序来替代。 -
父容器检查：确认
.cardsContainer未设置overflow: hidden或transform等会创建新层叠上下文的属性，否则会截断溢出的放大卡片。 -
响应式兼容：放大后卡片可能溢出视口，建议配合
max-width: 100vw或媒体查询限制最大尺寸。 -
性能优化：长时间
transition: 5s（5秒）极不友好，推荐0.3s–0.5s；若需强调效果，可用cubic-bezier(0.25, 0.46, 0.45, 0.94)增强弹性感。
完整可运行示例（精简版）：
<!-- Bootstrap 5.3 CSS & JS 已通过 CDN 引入 -->
<div id="carouselExample" class="carousel carousel-dark slide carousel-fade mb-5" data-bs-ride="carousel">
<!-- 轮播图内容（略） -->
</div>
<div class="cardsContainer px-3">
<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...</p>
</div>
</div>
<!-- 其他卡片（略） -->
</div>
<style>
.cardsContainer {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 替代 space-evenly，避免悬停时卡片飞出视口 */
gap: 1.5rem;
}
.card {
position: relative;
margin: 0;
transition: transform 0.4s ease, z-index 0.4s;
}
.card:hover {
transform: scale(1.25);
z-index: 1000;
}
/* 防止放大后文字模糊 */
.card:hover img {
will-change: transform;
}
</style>总结：解决卡片悬停被遮挡的本质是控制层叠上下文——通过 position: relative + z-index 显式声明层级优先级，并规避父容器的渲染限制。这是前端布局中 z-index 与 transform 协同工作的典型实践，掌握它将显著提升对 CSS 渲染层的理解深度。
