固定Navbar覆盖主体内容，设置margin无效该如何解决？

你的问题核心是fixed定位的导航栏脱离了正常文档流，页面其他元素不会自动为它预留空间，再加上你给body写了flex居中属性却没添加display: flex，导致直接设置margin的效果不符合预期。下面是两种可靠的解决方案：

方案一：给body设置匹配导航栏高度的padding-top #

1. 先通过浏览器开发者工具确定导航栏的实际高度（假设是120px）
2. 给body添加padding-top，同时补上display: flex让居中属性生效，再加box-sizing: border-box避免padding撑大页面：

body {
    height: 100dvh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    display: flex; /* 补上flex布局属性，否则居中无效 */
    padding-top: 120px; /* 值等于navbar的实际高度 */
    box-sizing: border-box;
}

方案二：用CSS变量动态适配导航栏高度（响应式友好） #

通过定义CSS变量，让main容器的margin自动匹配导航栏高度，适合导航栏高度随屏幕尺寸变化的场景：

.navbar {
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    --navbar-height: 120px; /* 定义导航栏高度变量 */
}

.main {
    margin-top: var(--navbar-height); /* 引用变量，自动适配高度 */
}

你的原始代码参考 #

<body>
    <div class="navbar">
        <h1>test</h1>
        <div style="justify-content: space-evenly;display:flex;">
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
        </div>
    </div>
    <div class="main">
        Test
    </div>
</body>

body {
    height: 100dvh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
}

.navbar {
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

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