固定定位Navbar遮挡页面标题的解决方案咨询

我看你遇到了固定导航栏遮挡页面内容的经典问题——当元素设置position: fixed后，它会脱离正常的文档流，页面里的其他元素不会自动为它腾出位置，这就是你的My Interests标题被挡住的原因。你尝试给标题加margin-top没生效，大概率是因为margin折叠或者空间不够，下面给你几个实用的解决方案：

方法1：给body添加对应Navbar高度的padding-top #

这是最直接的办法，我们给页面最外层的body加上顶部内边距，数值等于Navbar的高度（Bootstrap默认navbar高度是56px，你可以根据实际显示调整）：

body {
  padding-top: 56px; /* 刚好避开Navbar的高度 */
  background-color: #54b0cc;
}

记得把body上的inline背景色样式移到CSS文件里，这样代码更整洁好维护。

方法2：添加一个等高的占位div #

如果不想修改body的样式，可以在Navbar后面加一个空的div，让它占据Navbar原本的位置：

<!-- 你的Navbar代码 -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <!-- Navbar内容不变 -->
</nav>
<!-- 新增占位元素，高度和Navbar一致 -->
<div style="height: 56px;"></div>

这种方式适合需要更精细控制布局的场景。

方法3：用Bootstrap内置的fixed-top类（强烈推荐） #

既然你用的是Bootstrap 4，其实框架已经帮你处理好了这个问题！只需要给Navbar加上fixed-top类，它会自动给body添加合适的padding-top，完全不用手动计算高度：

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
  <!-- Navbar内容不变 -->
</nav>

这样既保留了固定定位的效果，又能自动避免遮挡内容，是最省心的方案。

修改后的完整CSS参考 #

把你的style.css调整成这样（如果用了fixed-top类，就不需要写position: fixed和body的padding了）：

/* 如果不用fixed-top，就保留下面两行；用的话可以删掉 */
/* body { padding-top: 56px; background-color: #54b0cc; } */
/* .navbar{ position: fixed; width: 100%; } */

/* 用fixed-top的话，navbar样式可以简化成： */
.navbar{ width: 100%; }

.figure{ margin-top: 20px; margin-left: 15.5px; }
.figure-caption{ text-align: center; color: rgb(55, 55, 55); }
.top-header{ margin-top: 0px; text-align: center; color: rgb(46, 46, 46); }
.mid-header{ text-align: center; }
footer{ text-align: center; margin-top: 340px; background-color: gray; height: 25px; }
#logo{ margin-top: 10px; margin-left: 1300px; }

补充：为什么你之前的margin-top没起作用？ #

你给.top-header加margin-top但没效果，是因为它的父容器.interests紧贴页面顶部，此时标题的margin会和上方的空白区域发生margin折叠——简单说就是这个margin并没有真正把标题往下推，而是和父元素的margin合并了。而给body加padding或者用占位元素，是从页面最外层预留空间，就不会出现这个问题啦。

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