CSS响应式布局求助：移动端实现茶杯图片与对应文字重叠，PC端保持现有布局

别担心，我来帮你搞定这个响应式布局需求！你的核心诉求是PC端保持三个茶杯横向排列、文字在图片下方的布局，移动端让文字直接叠在对应的茶杯图片上，我们可以通过CSS媒体查询结合定位属性来实现，同时先帮你修复HTML结构里的小错误。

第一步：修复HTML结构错误 #

你原来的代码里<head>标签被错误地放到了<body>内部，这不符合HTML规范，先调整为正确结构，同时修正h3标签的文本对齐属性（text-align是文本对齐属性，justify-content是flex容器的属性，不能直接写在h3标签上）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 必须加这个meta标签，确保移动端布局正常 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="selection">
        <div class="product mate-florale">
            <a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
                <img src="https://imgur.com/vwQHX9K.png" alt="Maté florale">
            </a>
            <div class="product-text">
                <h3 style="text-align: center;">Maté florale</h3>
            </div>
        </div>
        <div class="product mate-agrumes">
            <a href="https://o-mate.fr/products/mate-energisant-morning-boost">
                <img src="https://imgur.com/f079TDf.png" alt="Maté agrumes">
            </a>
            <div class="product-text">
                <h3 style="text-align: center;">Maté agrumes</h3>
            </div>
        </div>
        <div class="product mate-fruitee">
            <a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
                <img src="https://imgur.com/vQvNboK.png" alt="Maté fruitée">
            </a>
            <div class="product-text">
                <h3 style="text-align: center;">Maté fruitée</h3>
            </div>
        </div>
    </div>
</body>
</html>

第二步：编写响应式CSS #

核心思路是：

• PC端：保持flex横向布局，文字默认在图片下方
• 移动端：通过媒体查询触发，让每个产品容器设为相对定位，文字容器绝对定位在图片上方，同时调整布局适配移动端

修改后的CSS代码如下：

/* 全局基础样式 */
img {
    width: 200px;
    margin: 30px;
    display: block; /* 确保图片下方没有多余间隙 */
}

.selection {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 改为flex-start，避免产品高度不一致时对齐问题 */
    margin: 0 auto;
    padding: 0;
    gap: 20px; /* 用gap替代margin，更灵活控制产品间距 */
}

/* 给每个产品容器设置相对定位，为文字的绝对定位提供参考 */
.product {
    position: relative;
    text-align: center;
}

/* 移动端响应式设置（这里以768px为断点，可根据需求调整） */
@media (max-width: 768px) {
    .selection {
        flex-direction: column; /* 改为纵向排列 */
        align-items: center;
    }

    img {
        width: 100%; /* 图片占满容器宽度 */
        max-width: 300px; /* 限制最大宽度，避免图片过大 */
        margin: 20px 0;
    }

    /* 让文字绝对定位在图片上方，居中显示 */
    .product-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .product-text h3 {
        color: white; /* 设置白色文字，在图片上更清晰 */
        text-shadow: 0 0 5px rgba(0,0,0,0.8); /* 加文字阴影增强可读性 */
        margin: 0;
    }
}

代码说明 #

1. meta视口标签：必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端布局会出现缩放问题。
2. 统一类名：给三个产品容器都加上.product类，避免重复写CSS代码，更易维护。
3. 相对+绝对定位：.product设为position: relative，.product-text在移动端设为position: absolute，结合transform: translate(-50%, -50%)实现文字在图片正中央。
4. 文字可读性优化：给移动端的文字加上白色和阴影，确保在不同图片上都能清晰显示。
5. 弹性布局调整：移动端把.selection的flex-direction改为column，让产品纵向排列，同时调整图片宽度适配屏幕。

这样修改后，PC端会保持你原来的横向布局，移动端文字就会完美重叠在对应的茶杯图片上啦！你可以根据实际需求调整断点宽度、文字位置或样式~

备注：内容来源于stack exchange，提问作者Antoinemrl