How to Make a Fixed Page Header Not Overlap In-Page Anchors

Solutions with CSS

A fixed header and anchors can cause a problem when they are used together. But you can solve this problem with a little CSS.

In the following example, we have a <div> with a class "main" and add a <header> tag with two <a> tags inside it. We set the position of the <div> to "relative" and specify a background-color and width. Then, we style the "main" class by specifying its height and setting the overflow to "hidden" and the overflow-y to "scroll".

Then, you need to set the position of the <header> to "fixed" and specify the z-index property. Set the display of <a> tags of the <header> to "inline-block" and add a padding. The display of the <a> tag’s "anchor" class within the <h1> element must also be set to "inline-block", as well as you need to set the padding-top.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of making a fixed header not overlap the anchors:

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

In the following example, we place our anchor tag inside a <div> with a class "content". Here, we specify the margin-top property on the "content" class.

Example of using a fixed header with anchors:

<!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;
      }
      .content {
        margin-top: 90px;
      }
      .anchor {
        display: inline-block;
      }
      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>
      <div class="content">
        <h1>
          <a class="anchor" name="name">Header</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>
      </div>
    </div>
  </body>
</html>