当我单击链接导航到页面的不同部分时，导航栏会覆盖内容

Question

这是我的html：

\n

\r\n

\r\n

@import url(\'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\');\n\n.project-img {\n  width: 400px;\n  height: 289px;\n}\n\n.projects-container {\n  display: flex;\n  flex-direction: row;\n}\n\n.li-nav {\n  list-style: none;\n  padding: 10px 10px 10px 0px;\n}\n\n#ul-nav {\n  display: flex;\n  flex-direction: row;\n}\n\n#navbar {\n  position: fixed;\n  background-color: white;\n  width: 5000px;\n}\n\n#main {\n  padding: 80px 0px 0px 0px;\n}\n\na {\n  text-decoration: none;\n  color: black;\n  font-weight: 500\n}\n\n.nav-link {\n  font-size: 20px;\n}\n\n#all {\n  font-family: Roboto;\n}

\r\n

<div id=all>\n  <nav id="navbar">\n    <ul id="ul-nav">\n      <li class="li-nav"><a class="nav-link" href="#welcome-text">Sobre</a></li>\n      <li class="li-nav"><a class="nav-link" href="#projects">Projetos</a></l>\n        <li class="li-nav"><a class="nav-link" id="profile-link" target="_blank" href="https://github.com/caiocavalcante063">Github</a></li>\n    </ul>\n  </nav>\n  <div id="main">\n    <div id="welcome-section">\n      <h1 id="welcome-text">Ol\xc3\xa1, meu nome \xc3\xa9 Caio e sou estudante de Desenvolvimento Web. Aqui, voc\xc3\xaa ir\xc3\xa1 encontrar meus principais projetos.</h1>\n    </div>\n\n    <div id="projects">\n      <h2>Projetos</h2>\n\n      <div class="projects-container">\n        <div class="project-tile">\n\n          <h3>Tribute Page</h3>\n          <a href="https://codepen.io/caiocavalcante063/full/BaWmxvy" target="_blank"> <img class="project-img" src="https://i.ibb.co/CnrgnXL/Captura-de-tela-de-2021-06-03-11-04-03.png" alt="tribute page project"> </a>\n        </div>\n\n        <div class="project-tile">\n          <h3>Technical Documentation Page\n            <h2>\n              <a href="https://codepen.io/caiocavalcante063/pen/dyvdydM"><img class="project-img" src="https://i.ibb.co/8cCPT2k/Captura-de-tela-de-2021-06-03-10-26-27.png" alt="technical documentation page"></a>\n        </div </div>\n      </div>\n    </div>\n  </div>

\r\n

\r\n

\r\n

\n

导航栏位于固定位置，因此当我单击导航栏链接时，页面向下滚动到引用的内容。但问题是，当我这样做时，导航栏正好位于内容应该在的位置，覆盖了它。

\n

有没有办法让导航栏链接向下滚动得少一点，以便我可以获得预期的效果？或者更有效的解决方案？

\n

Answer 1

由于浏览器正在执行正确的操作（滚动到锚点的位置），因此您必须做一些“修改”才能使类似的操作正常工作。基本思想如下：

• 为标题和（看不见的）锚点创建一个容器元素
• 创建一个标题元素，并将其放入容器中
• 为锚点创建一个元素，并将其放入容器中
• 使用绝对定位将锚点向上移动适当的距离（通常类似于 FIXED_HEADER_HEIGHT + EXTRA_PADDING）

这是一个简单的例子：

.container {
  position: relative;
}

.anchor {
  position: absolute;
  top: -65px; /* given the fixed header is 50px tall, and you want 15px padding */
  left: 0px;
}

和 HTML：

<div class="container">
  <h2 class="title">Section Title</h2>
  <a class="anchor" name="target"></a>
</div>

然后，任何链接都#target将转到上方 65px 的位置.title。