Bootstrap 4落地页左侧卡片右侧重叠图片布局问题求助

实现方案 #

你需要的左内容卡片、右背景图重叠效果，可通过调整定位逻辑和层级实现，具体修改如下：

调整后的HTML代码 #

<!--==========================-->
<!--=         Banner         =-->
<!--==========================-->
<section class="banner banner-saas-main">
    <!-- /.banner-sass-svg-bg -->
    <div class="container">
        <div class="banner-content-wrapper">
            <div class="row align-items-center">
                <!-- 左侧卡片列 提升层级 -->
                <div class="col-lg-6 position-relative z-index-2">
                    <div class="card w-100" style="background: #C4FFDC;">
                        <div class="card-body">
                            <div class="banner-content ">
                                <h1 class="banner-title wow fadeInUp p-3 " data-wow-delay="0.3s">
                                    Welcome to the <span>Astriol</span><br>
                                    Help Community
                                </h1>
                            </div>
                            <br>
                            <div class="p-4">
                                <p class="text-justify">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- /.banner-content-sass -->
                </div>
                <!-- /.col-lg-6 -->
                <!-- 右侧图片列 移除多余嵌套 -->
                <div class="col-lg-6 position-lg-static">
                    <div class="saas-animate-image">
                        <div id="svgContainer" class="wow zoom">
                            <img src="assets/img/right-bg.png" class="right-banner-img img-fluid" alt="右侧背景图">
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-6 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.banner-content-wrapper -->
    </div>
    <!-- /.container -->
</section>
<!-- /.banner banner-main -->

调整后的CSS代码 #

.banner-saas-main {
    padding: 170px 0;
    overflow: hidden;
}

.banner {
    height: 975px;
    position: relative;
}

.container {
    max-width: 1200px;
}

/* 右侧图片定位样式 */
.right-banner-img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* 调整重叠偏移量，可根据实际设计修改 */
    width: 60%;
    z-index: 1;
}

/* 移动端响应式适配 */
@media (max-width: 991.98px) {
    .right-banner-img {
        position: relative;
        transform: none;
        width: 100%;
        margin-top: 2rem;
        right: auto;
        top: auto;
    }
}

核心调整说明 #

• 给左侧卡片列添加Bootstrap自带的position-relative z-index-2类，保证卡片层级高于右侧图片，不会被图片覆盖
• 右侧图片改为相对于banner容器绝对定位，直接固定在右侧垂直居中位置，不会挤压左侧卡片的布局空间，也不会出现布局塌陷问题
• 移除原代码中图片的行内相对定位偏移逻辑，避免响应式场景下元素错位
• 增加移动端适配规则，屏幕宽度小于992px时图片改为普通流式布局，和卡片上下排布，避免小屏显示异常

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