固定导航栏（Sticky Navbar）遮挡Div元素的布局问题求助

这个问题其实很常见——你的导航栏用了position: fixed，这个属性会让元素脱离正常的文档流，不再占据页面空间，所以下方的内容会默认从浏览器顶部开始渲染，自然就和导航栏重叠了。这里有几个靠谱的解决办法，你可以根据需求选择：

问题原因拆解 #

固定定位的元素会“浮”在页面上方，原本属于它的空间会被后续元素填充，导致导航栏遮挡住下方模块的顶部内容。

具体解决方案 #

1. 全局设置页面主体顶部内边距（最简单） #

给body设置和导航栏高度一致的padding-top，把所有内容整体往下推，避开导航栏：

body {
  padding-top: 4rem; /* 和导航栏的height值完全匹配 */
  margin: 0; /* 移除浏览器默认的body外边距，避免出现多余空白 */
}

这个方法适合整个页面所有内容都需要避开导航栏的场景，一次设置全局生效。

2. 给锚点目标添加滚动外边距（推荐） #

如果只想在锚点跳转时让内容避开导航栏（比如页面开头有不需要避开的内容），可以用CSS的scroll-margin-top属性，专门针对锚点跳转的滚动位置做调整：

/* 给所有.room类的模块统一设置 */
.room {
  scroll-margin-top: 4rem; /* 等于导航栏高度，也可以加一点额外空间比如4.5rem */
}

/* 或者单独给每个锚点元素设置 */
#home, #main, #bedroom, #living-room, #bathroom, #kitchen, #others {
  scroll-margin-top: 4rem;
}

这个方法更灵活，不会影响页面正常布局，只有当用户通过导航栏跳转到对应模块时，浏览器会自动留出导航栏的高度空间。

3. 局部调整单个模块的顶部外边距 #

如果只有个别模块被遮挡，也可以直接给该模块设置margin-top：

#bedroom {
  margin-top: 4rem;
}

这个方法适合局部调整，但如果有多个模块都需要避开导航栏，不如前两种方法高效。

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