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

Question

As the title describes. I am trying to offset the anchor link, so it appears 100px from the top of the viewport.

This is what I have tried so far.

<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>

edit:: I think I miss read the online tutorial I was following. I have also tried this, but still can't get it to work.

<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

The CSS applies on the h2 after you click on the anchor. That is how :target css works. Your code will hide the element once you click on the anchor. If that is not required then remove it.

Now your problem of making H2 appear below the header. For this you need to either add position absolute or fixed (depends upon your final HTML), instead of relative.

This is the updated code

<style>

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

Answer 2

This seems to work.

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