如何在flex容器切换方向时保持绝对定位元素的对齐？

问题 #

在flex容器内的图片上方设置了若干banner：当flex容器为flex-direction: row时，图片与banner能按CSS规则正常对齐；但容器切换为flex-direction: column后，所有banner挤在顶部相互重叠，类为location-container的banner未随容器方向变化调整位置，仅显示在第一个父元素上方。

期望：网页宽度≤1200px时，flex容器切换为column方向，文本容器仍保持相对图片的正确位置。

相关HTML代码 #

<html>
    <div class="locations">
        <div class="location">
            <img src="resources/images/norbert-toth-I1oL89qxefc-unsplash.jpg" />
            <div class="location-container">
                <h2>Herring Bone Library</h2>
                <p>141 Address St. <br>Detroit, MI <br>49449</p>
            </div>
        </div>
        <div class="location ">
            <img src="resources/images/kristen-colada-adams-wpCJlKxCNRA-unsplash.jpg" />
            <div class="location-container">
                <h2>Sunrise Botanical <br>(Downstairs)</h2>
                <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
            </div>
        </div>
        <div class="location">
            <img src="resources/images/daria-volkova-_IhXaHmTJr8-unsplash.jpg" />
            <div class="location-container">
                <h2>Black Cat Coffee</h2>
                <p>686 My Mind <br>Detroit, MI <br> 49448</p>
            </div>
        </div>
    </div>
</html>

相关CSS代码 #

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: absolute;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
    }
}

解决方案 #

问题核心是绝对定位的参照对象错误：当前location-container的父级是设置了position: relative的.locations容器，所以所有banner都会相对于整个flex容器定位，而非各自的.location子容器。

修改步骤：

• 给每个.location添加position: relative，让内部的location-container以自身为定位参照
• 移除.locations的position: relative（不需要它作为定位参照）
• 保持location-container的position: absolute和位置属性不变，这样它就会相对于自己的父容器.location定位，无论flex容器是row还是column布局，都能保持在对应图片的上方

修改后的CSS代码：

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    /* 移除position: relative */
}

/* 给每个location添加相对定位 */
.location {
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        flex-direction: column;
        /* 其他重复属性可省略，继承默认值即可 */
    }
}

说明：修改后，每个location-container都会相对于自己所在的.location盒子定位，不管flex容器是横向还是纵向排列，每个banner都会固定在对应图片的左上角（按设置的top:1rem和margin-left:1rem），不会出现重叠问题。

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