固定定位Navbar组件遮挡页面内容的问题求助

核心问题1：导航栏顶部出现空白 #

你的.nav用了position: fixed但没设置top: 0和left: 0，固定定位元素如果不指定偏移位置，会保持它在正常文档流里的初始位置。当你给body加margin-top时，页面整体下移，导航栏也跟着停在了下移后的位置，就出现了顶部空白，看起来像是导航栏“变高”了。

核心问题2：内容被导航栏遮挡 #

固定定位元素脱离正常文档流，不会占据空间，所以下方内容会往上跑被遮挡。你给.gallery加了margin-top:55px但没生效，是因为导航栏没固定在顶部，位置不对导致间距没对上。

具体修复步骤 #

1. 给导航栏的CSS补上top: 0; left: 0;，强制固定在页面最顶部：

.nav {
    background-color: white;
    color: black;
    font-size: 25px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    padding-bottom: 5px;
    position: fixed;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid gainsboro;
    top: 0; /* 新增 */
    left: 0; /* 新增 */
}

2. 给页面内容留出顶部空间，二选一即可：
   • 方案一：给body加padding-top（比margin-top更稳妥，避免margin折叠问题）：

   body {
       padding-top: 55px; /* 等于导航栏高度 */
       margin: 0; /* 清除body默认margin，避免额外空白 */
   }
   

   • 方案二：确保.gallery的margin-top足够（导航栏固定后这个值会正常生效）：

   .gallery {
       /* 其他样式不变 */
       margin-top: 60px; /* 可以比导航栏高度多一点，留出更舒服的间距 */
   }
   

额外注意 #

记得清除body的默认margin（浏览器自带8px左右），不然可能还会出现意料之外的空白。

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