如何偏移锚链接以清除固定标题？

Question

正如标题所描述的那样。 我试图偏移锚链接，因此它从视口顶部出现 100 像素。

这是我到目前为止所尝试的。

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      visibility: hidden;
      }
 </style>

<a href="#01"> Go to link 01</a> 
  
<h2 id="01"> link 01</h2>

编辑:: 我想我想念我正在关注的在线教程。 我也试过这个，但仍然无法让它工作。

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      margin: -100px 0;
      }
 </style>

<a href="#01"> Go to link 01</a> 

<h2 id="01"> link 01</h2>

Answer 1

单击锚点后，CSS 将应用于 h2。 这就是 :target css 的工作原理。 单击锚点后，您的代码将隐藏该元素。 如果不需要，则将其删除。

现在您使 H2 出现在标题下方的问题。 为此，您需要添加绝对位置或固定位置（取决于您的最终 HTML），而不是相对位置。

这是更新后的代码

<style>

   :target{
      display: block;
      position: absolute;
      top: 100px; 
      }
 </style>

Answer 2

这似乎有效。

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}