固定导航（fixed nav）问题求助：点击section链接时标题被遮挡

不用给section加过大的margin-top，试试这几个更合理的方法：

方法1：使用CSS scroll-margin-top 属性 #

这是最直观的现代解决方案，直接给目标区块设置滚动偏移量，值等于固定导航的实际高度（比如导航高80px）：

section {
  scroll-margin-top: 80px; /* 替换为你的导航高度 */
}

点击锚点链接时，页面会自动给区块顶部预留出导航高度的空间，既不会遮挡标题，也不影响正常布局。

方法2：内边距+负外边距组合 #

如果需要兼容较老浏览器，可采用这个技巧：给section设置等于导航高度的内边距，再用负外边距抵消布局影响：

section {
  padding-top: 80px; /* 导航高度 */
  margin-top: -80px; /* 抵消padding对布局的影响 */
}

该方法不会改变页面整体排版，但能让锚点定位的位置自动向下偏移导航高度的距离。

方法3：锚点伪元素偏移 #

给带id的区块添加绝对定位的伪元素，通过占位将定位点向上偏移导航高度：

section[id]::before {
  content: "";
  display: block;
  height: 80px; /* 导航高度 */
  margin-top: -80px;
  visibility: hidden;
}

伪元素会占据导航高度的空间，让页面滚动时自动停在标题不被遮挡的位置。

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