如何为Bootstrap Carousel添加固定不动的Logo图片

你的问题根源在于：把Logo放在了carousel-inner容器里（这个容器是轮播内容的滑动包裹层，内部元素会跟着轮播切换滑动），同时CSS用position: relative无法让Logo脱离轮播的流动布局。下面是具体的解决方法：

1. 调整HTML结构 #

• 删除carousel-inner里的冗余Logo容器
• 用一个父容器（比如carousel-wrapper）包裹Logo和整个轮播组件，作为Logo定位的参考基准
• 将Logo容器放在轮播组件的同级位置，确保它不属于轮播滑动内容的一部分

完整HTML代码

<!-- 父容器：包裹Logo与轮播，提供定位基准 -->
<div class="carousel-wrapper">
    <!-- 静止Logo -->
    <div class="logo-image">
        <img src="Aaron%20Murillo-Black.png" class="img-fluid" alt="Web Site Logo">
    </div>
    <!-- Bootstrap轮播组件 -->
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="Dress.jpg" class="d-block w-100" alt="Dress">
            </div>
            <div class="carousel-item">
                <img src="Balloon.jpg" class="d-block w-100" alt="Balloon Fiesta">
            </div>
            <div class="carousel-item">
                <img src="DarkChurch.jpg" class="d-block w-100" alt="Dark Church">
            </div>
            <div class="carousel-item">
                <img src="River%20Falls.jpg" class="d-block w-100" alt="River Cave">
            </div>
            <div class="carousel-item">
                <img src="Wedding.jpg" class="d-block w-100" alt="Couples">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

2. 修改CSS样式 #

• 给父容器设置position: relative，作为Logo绝对定位的参考
• 将Logo容器改为position: absolute，脱离文档流，叠加在轮播图上方
• 通过z-index确保Logo不会被轮播内容或控件遮挡
• 调整top、left等属性定位Logo的位置

对应的CSS代码

/* 父容器：为Logo提供绝对定位的基准 */
.carousel-wrapper {
    position: relative;
    width: 100%;
}

/* Logo容器样式 */
.logo-image{
    width: 10%;
    height: 100px;
    border-radius: 10%;
    overflow: hidden;
    /* 绝对定位，脱离轮播滑动流 */
    position: absolute;
    /* 定位到顶部水平居中，可按需调整 */
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* 确保Logo在轮播内容和控件上方 */
    z-index: 10;
    /* 可选：添加背景色避免透明Logo与轮播图混淆 */
    background-color: white;
}

关键说明 #

• carousel-wrapper的position: relative是核心，让Logo的绝对定位以它为基准
• z-index: 10保证Logo不会被轮播内容或前后切换按钮遮挡
• transform: translateX(-50%)配合left:50%可以快速实现Logo水平居中，调整top值可改变垂直位置

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