如何实现CSS响应式外边距？解决元素重叠问题

你的问题核心在于绝对定位元素与相对定位标题的布局冲突：.loginRegisterBtn用了position: absolute，同时叠加行内margin-top，而标题的固定字号在小屏幕下会撑高元素，绝对定位的按钮不会自动避让，导致重叠。单纯用vw单位无效，是因为没结合标题的响应式调整，下面给出两种可行方案：

方案1：优化绝对定位，结合媒体查询适配 #

直接用top属性代替margin-top（绝对定位元素的margin行为易出问题），同时针对小屏幕调整按钮位置与标题字号：

第一步：整理HTML（移除无效属性，分离样式） #

<a href="/" style="text-decoration: none; color: black">
    <h1 class="site-title"><strong>Crabapple Lake Parc</strong></h1>
</a>

<span class="loginRegisterBtn">
    <a href="/login" style="text-decoration: none; color: black">LOGIN</a> | 
    <a href="/register" style="text-decoration: none; color: black">REGISTER</a>
</span>

第二步：编写响应式CSS #

/* 基础样式 */
.site-title {
    text-align: center;
    font-size: 60px;
    position: relative;
    top: 15px;
    color: #413f3d;
}

.loginRegisterBtn {
    position: absolute;
    top: 50px; /* 替代行内margin-top，控制电脑端位置 */
    right: 10px;
    text-decoration: none;
    color: black;
    font-size: 20px;
}

/* 手机屏幕适配（宽度≤768px） */
@media (max-width: 768px) {
    .site-title {
        font-size: 32px; /* 缩小标题字号，降低整体高度 */
        top: 10px;
    }

    .loginRegisterBtn {
        top: 70px; /* 根据标题实际高度调整，确保不重叠 */
        font-size: 16px; /* 适配手机字号 */
    }
}

方案2：改用Flex布局（更健壮的响应式方案） #

放弃绝对定位，用Flex容器统一管理标题与按钮，让布局自动适配屏幕：

第一步：重构HTML结构 #

<header class="site-header">
    <a href="/" class="site-logo">
        <h1><strong>Crabapple Lake Parc</strong></h1>
    </a>
    <div class="auth-buttons">
        <a href="/login">LOGIN</a> | 
        <a href="/register">REGISTER</a>
    </div>
</header>

第二步：编写Flex布局CSS #

.site-header {
    display: flex;
    justify-content: space-between; /* 标题左、按钮右 */
    align-items: center; /* 垂直居中对齐 */
    padding: 15px 10px; /* 用padding替代top定位，更稳定 */
}

.site-logo h1 {
    margin: 0;
    text-align: center;
    font-size: 60px;
    color: #413f3d;
}

.site-logo {
    text-decoration: none;
    color: black;
}

.auth-buttons {
    font-size: 20px;
}

.auth-buttons a {
    text-decoration: none;
    color: black;
    margin-left: 5px;
}

/* 手机屏幕适配 */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* 垂直排列，避免横向空间不足 */
        gap: 10px; /* 元素间留间距，防止拥挤 */
    }

    .site-logo h1 {
        font-size: 32px;
    }

    .auth-buttons {
        font-size: 16px;
    }
}

为什么vw单位无效？ #

vw是基于视口宽度的单位，但你只调整了按钮的margin-top，没有同步缩小标题的固定字号。小屏幕下标题的60px字号依然会撑高元素，导致按钮的vw单位间距不足以避让，必须同时对标题和按钮的尺寸/位置做响应式调整。

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