使用Bootstrap实现网站移动端响应式 重叠图片适配问题求助

现有代码问题 #

1. 栅格结构嵌套错误，额外嵌套的container打乱了布局逻辑
2. 两张图片分属不同容器，没有共同的定位父级，无法实现叠放效果

修正后代码 #

<section class="bg-white text-dark mt-5 text-center text-sm-start">
    <div class="container">
        <div class="row align-items-center">
            <!-- 左侧文案区域 -->
            <div class="col-lg-6 col-md-6 col-sm-12">
                <h2 class="mt-5 pt-5 deliver">我们覆盖Syokimau全区域配送</h2>
                <p class="deliver-paragraph mb-4 text-sm-start">Lorem ipsum dolor sit amet, consectetur adipiscing 
                elit. Praesent eget pulvinar nisi. Aenean sed sem venenatis, egestas felis vel, 
                dictum urna. Phasellus rutrum placerat orci. Integer in varius ex. Praesent libero
                orci, consectetur eget mauris in, vehicula tincidunt purus. Vivamus tempor non
                mauris quis pharetra.</p>
                <div>
                    <button class="btn btn-outline-primary mb-4" id="btn-1">查看位置</button>
                    <button class="btn btn-primary text-white ms-3 mb-4" id="btn-2">查看位置</button>
                </div>
            </div>
            <!-- 右侧图片叠放容器 -->
            <div class="col-lg-6 col-md-6 col-sm-12 position-relative">
                <!-- 底层背景图 -->
                <img class="img-fluid" src="images/blob.png" id="blob">
                <!-- 上层产品图 可根据设计调整偏移、尺寸、层级 -->
                <img class="img-fluid position-absolute top-0 start-25 z-index-1 w-75 mt-md-5" src="images/waterdrink.png" id="waterdrink">
            </div>
        </div>
    </div>
</section>

适配调整说明 #

• 位置调整：修改上层图片的top-*/start-*/bottom-*/end-*类控制偏移，添加sm:/md:/lg:等响应式前缀，可直接实现不同屏幕尺寸下的位置适配，无需额外写媒体查询
• 层级调整：修改z-index-*的数值即可调整两张图的上下层顺序
• 尺寸调整：用w-*类配合响应式前缀，可控制不同屏幕下上层图片的显示比例

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