固定导航栏与页面内容重叠，无法设置间距问题求助

问题根源：使用position: fixed的元素会脱离正常文档流，页面其他元素不会为它预留空间，导致内容向上偏移与导航栏重叠。你给header设置的margin-bottom: 10rem对fixed元素无效，因为它已不在文档流中。

解决步骤： #

1. 计算导航栏总高度：你的nav有margin-top:27px，加上自身height:50px，总高度为77px左右。
2. 给主内容预留顶部空间：给页面主容器（如<main>或<body>）添加padding-top，值大于等于导航栏总高度，确保内容被推到导航栏下方。

修改后的SCSS代码： #

header {
    width: 100%;
    position: fixed;
    top: 0; // 确保导航栏固定在顶部
    z-index: 999;

    nav {
        margin: 27px auto 0 auto;
        width: 590px;
        height: 50px;
        transition: 0.25s ease-in-out;
        z-index: 4;

        background-color: #313131;
        border-radius: 8px;
        font-size: 0;

        a {
            line-height: 50px;
            height: 100%;
            font-size: 15px;
            display: inline-block;
            position: relative;
            z-index: 1;
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            color: white;
            cursor: pointer;
        }
    }
}

// 给主内容添加顶部内边距，避免重叠
main {
    padding-top: 80px; // 比导航栏总高度多3px，留出空隙
}

如果页面没有使用<main>标签，直接给<body>添加样式也可以：

body {
    padding-top: 80px;
}

问题效果截图： #

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