Example of making a fixed header not overlap the anchors:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        background-color: lightgreen;
        width: 700px;
      }
      .main {
        height: 300px;
        overflow: hidden;
        overflow-y: scroll;
      }
      header {
        position: fixed;
        width: 700px;
        z-index: 1;
        background-color: green;
      }
      header a {
        display: inline-block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
      }
      .anchor {
        display: inline-block;
        padding-top: 90px;
      }
      h1 {
        padding-left: 20px;
      }
      p {
        padding: 0 20px 20px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <header>
        <a href="/learn-html.html">Learn HTML</a>
        <a href="/learn-git.html">Learn GIT</a>
      </header>
      <h1>
        <a class="anchor" name="name">Anchor link</a>
      </h1>
      <p>
        In the HTML Basics section, you will have a full understanding of Editors and Tools that you need when working on building web pages. It will inform you about the professional editors that web developers use for coding. Elements are the fundamentals of HTML. Each HTML document is made of elements, which are defined using tags. HTML Elements teaches you the types of HTML elements. It also highlights the difference between HTML tags and HTML elements that are often confused.
      </p>
      <p>
        HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
      </p>
      <p>
        HTML Attributes are added to an HTML element to provide additional information about it. Book suggests lots of examples and the list of the most used attributes.
      </p>
      <p>
        HTML Formatting sophisticated chapter lets you explore the categories of formatting tags with a brief description and examples.
      </p>
      <p>
        Websites contain different types of links that take you directly to other pages or allow navigating to a specific part of the page. Find out how you can define hyperlinks in the HTML Links chapter and how to use different attributes with links and how to apply links on the image.
      </p>
    </div>
  </body>
</html>