响应式布局问题：大屏并列重叠，小屏垂直排列失效

问题说明 #

大屏（≥768px）下，image-container与text-container并列重叠的布局正常，但切换到小屏（<768px）时，设置flex-direction: column后元素仍堆叠在一起，无法实现图片在上、文本在下的垂直排列。同时大屏支持图片居左/居右两种布局样式。

问题根源 #

大屏布局中，promo_text-container_img-right和promo_image-container_img-right均设置了position: absolute，绝对定位元素会脱离flex容器的文档流，导致flex容器的排列规则对其失效。小屏媒体查询中仅重置了文本容器的定位，未处理图片容器的绝对定位及大屏下的定位、负margin等属性，导致布局混乱。

修复方案及代码 #

修复后的HTML（无需修改） #

<div class="promo-container"> <!-- flex for large, flex column for small -->
    <div class="promo_image-container_img-right promo_image-container rounded-3xl p-5 text-cfcu-supplementary-gray-10 bg-cfcu-supplementary-gray-75">
        <img src="{{$image['url']}}" class="p-5 max-w-80 max-h-52" />
    </div>
    <div class="promo_text-container_img-right promo_text-container rounded-3xl p-5">
        <div class="text-2xl font-bold">{{$title}}</div>
        <div class="my-2">{{$description}}</div>
        <a href="{{$button_url}}"><button id="promotion-cta-button" class="bg-black text-white font-bold p-2 rounded-full">{{$button_text}}</button></a>
    </div>
</div>

修复后的CSS #

.promo-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 28rem;
}

.promo_text-container_img-left {
    background: white;
    width: 60%;
    z-index: 100;
    margin-left: -35px;
    height: 80%;
    position: relative;   
}

.promo_image-container_img-left {
    width: 60%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.promo_text-container_img-right {
    background: white;
    width: 53%;
    z-index: 100;
    margin-right: -15px;
    height: 80%;
    position: absolute;   
    left: 0;
}

.promo_image-container_img-right {
    width: 53%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
}

@media screen and (max-width: 768px) {
    .promo-container {
        flex-direction: column;
        height: auto; /* 取消固定高度，适配内容 */
        align-items: stretch; /* 子元素撑满容器宽度 */
        gap: 1rem; /* 增加垂直间距，避免重叠 */
    }
    /* 重置所有定位相关属性，让元素回到flex文档流 */
    .promo_image-container_img-right,
    .promo_text-container_img-right,
    .promo_image-container_img-left,
    .promo_text-container_img-left {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        left: auto;
        right: auto;
    }
    /* 确保图片容器居中对齐 */
    .promo_image-container_img-right,
    .promo_image-container_img-left {
        justify-content: center;
    }
}

修复要点 #

• 小屏模式下将所有子容器的position重置为static，让它们回到flex容器的文档流中，这样flex-direction: column才能生效。
• 清除大屏下的left/right定位、负margin，避免干扰垂直布局。
• 取消容器的固定高度，改为height: auto，适配垂直排列后的内容高度。
• 添加gap属性设置垂直间距，让图片和文本不堆叠。

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