How to Fixed Header Overlapping Content using CSS

by

Want to fix header overlap? Learn how to fix it in easy ways!

In this post, we’ll talk about a common problem on websites where titles and fixed headers sometimes cover up the content called overlap.

Does this issue sometimes happen to you, when creating a simple HTML and CSS page, which looks like the image below.

There are some common reasons behind this problem like wrong Z-index, positioning issues, padding or margins, CSS box model, responsive design and many more similar reasons like this.

You can Fix this issue by increase to your Header Z-index Value, Go to the CSS file and give z-index: 100%; to header, Now you header fix from Overlapping for the space you can add padding-top 10px; Save the file and see the preview

How to Fixed Header Overlapping Content

So this is the former way to fix your header overlapping content, to fix this problem we are going to use the CSS z-index property

Start by selecting your header tag inside the CSS style sheet, if your header is in a container you can also select the class name of the container where you placed your header.

Here is example

header {
}

Once you have added the header tag to the CSS sheet, proceed to the second step by adding the z-index with the value,

Here we are going to add CSS z-index property with value, z-index value we will set it to 100%.

Here is code example

header {
  z-index: 100%;
}

Once you are done with the z-index with 100% value, save the file and check the result once again.

impotent: Always remember, the z-index value for the header is set to 100% otherwise it will not work.

I hope this post helps you to fixed header from overlapping Content.

You may also wanted to know: Replace Double Quotes in Javascript [Two Easy Ways]

Leave a Comment