CSS基础布局问题：绝对定位导致区块错位求助

核心问题分析 #

1. Flex布局默认横向排列：你的<main>设置了display: flex，Flex容器默认主轴方向为横向（row），内部的两个<section>会自动并排显示，这是第二个section跑到右侧的直接原因。
2. Absolute定位基准错误：#info使用position: absolute后脱离文档流，但未给父容器.banner设置position: relative，导致它相对于整个页面定位，易出现适配问题。

修复步骤及代码调整 #

1. 修改Flex容器方向，强制纵向排列

给<main>添加flex-direction: column，让内部元素从上到下布局：

main {
    display: flex;
    flex-direction: column; /* 新增：纵向排列子元素 */
    justify-content: center;
    background-color: black;
    align-items: center; /* 可选：让子元素水平居中 */
}

2. 修正绝对定位的基准容器

给.banner设置position: relative，让#info相对于Banner容器定位，同时用transform实现文本居中（替换固定像素值，提升响应式适配）：

.banner {
    max-width: 100%;
    height: auto;
    position: relative; /* 新增：作为绝对定位的父基准 */
}

#info {
    text-align: center;
    max-width: 800px;
    position: absolute;
    /* 替换固定top/left，用transform实现居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.594);
}

3. 修复HTML语法错误

你的<p">多了一个引号，修正为：

<p>Mariana is the owner and the lead designer of Mangata and Gallo. After graduating from design school
    with a specialization in diamond cutting and metal smithing, Mariana opened a store in her hometown,
    Austin and started to grow her business online. Mariana has always managed every aspect of the
    business, from jewelry design to marketing to e-commerce. However, she recently hired several
    artisans to help craft her designs and a young employee to help manage the company website and
    social media accounts.</p>

最终完整代码 #

CSS

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: black;
    align-items: center;
}

.banner {
    max-width: 100%;
    height: auto;
    position: relative;
}

.banner img {
    width: 100%;
}

#info {
    text-align: center;
    max-width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.594);
}

h1 {
    text-decoration: underline;
    font-size: 30px;
}

p {
    margin-top: 10px;
    font-size: 20px;
}

HTML

<body>
    <main>
        <section class="banner">
            <img src="https://cdn.pixabay.com/photo/2016/02/14/09/45/diamond-1199183_1280.jpg" height="556px">
            <div id="info">
                <h1>MANGATA GALLO</h1>
                <p>Mariana is the owner and the lead designer of Mangata and Gallo. After graduating from design school
                    with a specialization in diamond cutting and metal smithing, Mariana opened a store in her hometown,
                    Austin and started to grow her business online. Mariana has always managed every aspect of the
                    business, from jewelry design to marketing to e-commerce. However, she recently hired several
                    artisans to help craft her designs and a young employee to help manage the company website and
                    social media accounts.</p>
            </div>
        </section>
        <section class="cards">
            <article class="product">
                <h3 class="card-title">Wedding rings</h3>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTirprNMUJgd2fFMXWpwgs4GRao7zGDsQSfeA&usqp=CAU"
                    alt="Wedding rings">
                <p class="card-description">Temporary Text</p>
            </article>
        </section>
    </main>
</body>

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