如何偏移锚点链接以清除固定标头

Question

如标题所述。我正在尝试偏移锚点链接，因此它显示在距离视口顶部100px的位置。

这就是我迄今为止所尝试的。

<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

这似乎有效。

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

Answer 2

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

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

这是更新后的代码

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