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

【问题标题】：How to offset a anchor link to clear fixed header?如何偏移锚链接以清除固定标题？
【发布时间】：2020-11-25 02:59:52
【问题描述】：

如标题所述。我正在尝试偏移锚链接，因此它出现在距离视口顶部 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>

【问题讨论】：

为什么要在目标元素中添加可见性隐藏？即使您的代码正在运行，它也不会可见！
我从在线教程中获得了这段代码。这很奇怪，因为链接仍然显示。
你能解决吗？

标签： html css anchor offset

【解决方案1】：

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

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

这是更新后的代码

<style>

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

【讨论】：

【解决方案2】：

这似乎有效。

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

【讨论】：