如何防止主内容透过固定导航栏（Navbar）显示？

嗨，这个问题我太熟悉啦！其实根源在于fixed定位的导航栏会脱离正常的文档流，页面里的其他元素（比如你的section）会默认从页面最顶部开始布局，自然就被导航栏给挡住了。给你几个简单好用的解决办法：

方法1：给body添加顶部内边距 #

直接给body设置和导航栏高度一致的padding-top，让页面所有内容都从导航栏下方开始排布：

body {
  margin: 0;
  padding-top: 46px; /* 这个值要等于或略大于导航栏的实际高度，根据你的代码，46px刚好适配 */
}

方法2：仅给section添加顶部外边距 #

如果不想调整整个body的布局，只针对section元素设置margin-top就行：

section {
  margin-top: 46px; /* 同样匹配导航栏的高度 */
}

方法3：用CSS变量实现灵活复用 #

要是以后可能修改导航栏高度，用CSS变量会更方便，不用反复修改多个地方的数值：

/* 先定义导航栏高度变量 */
:root {
  --navbar-height: 46px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  height: var(--navbar-height); /* 绑定变量 */
}

body {
  margin: 0;
  padding-top: var(--navbar-height); /* 复用变量 */
}

小贴士：你可以通过浏览器的开发者工具（按F12）查看导航栏的实际高度，确保设置的数值准确哦～

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