html - 链接到 ID 时，元素出现在标题下方

Question

我是网络开发的新手，主要是想通过互联网教程等自学。我是一个完全的新手，所以这可能是一个愚蠢的问题，但我已经在谷歌上上下搜索了，还没有找到答案。

基本上我的问题是，我创建了一个页面顶部带有 position: fixed; header 的网页。我调整了页面的边距，使一切看起来都很棒。该页面完全按照我的预期显示。

但是，我遇到了一个我发现自己无法修复的小缺陷:我在页面上有几个链接可以链接到同一页面上其他地方的特定标题。 (例如，我有一个元素，例如 <section id="section_3">...</section> ，而在同一页面的其他地方我正在使用 <a href="#section_3">...</a> 。它可以工作并引导我到适当的标题，但不幸的是我链接到的 <section> 元素的顶部(主要是部分标题) 被页面顶部的固定标题覆盖，所以我必须向上滚动一点才能阅读部分标题。我尝试链接到 <h1> 而不是 <section> 元素，认为它可能与不兼容html5 之类的，但我也有同样的问题。

我希望拥有它，以便当我点击这些 ID 链接时，部分标题是标题下的第一个可见元素。我怎样才能做到这一点？我认为这是一种足够普遍的情况，可以对其进行简单的修复，但我似乎找不到有关该主题的任何信息。 (我对使用 html5 或 css3 没有任何问题。目前这只是一个个人元素，当我公开任何内容时，我希望它会走得足够远，使用它们不会有任何问题。对于目前，它只需要在我的浏览器上工作。)

在此先感谢任何可以提供帮助的人!

Answer 1

只需添加@johniebenson 评论，为相关部分添加这样的 css。假设标题的高度是 60px，你想在标题下方留出大约 40px 的空间，然后执行此操作。示例:#section_3:target{ padding-top: 100px;margin-top: -100px}