Why and how to solve the problem of overlapping and hiding the element directly below the header when the header is fixed at position:fixed

If you want the header to stay at the top of the page even after scrolling, you need to use position: fixed.

header {
    position: fixed;
    top: 0;
    left: 0;
}

This is the cause and solution for when the main content overlaps and hides under the header like this.

Causes of “floating” headers

First, let’s illustrate the cause.

Originally, it was as shown below,

but when it is fixed, it looks like this.

The header is floating in the air, and the main part is hidden underneath it.

Remove the margin for the header height

Once you know that, it’s easy to fix the problem by setting the margin of the element directly under the header to the height of the header.

You can also apply it to the body tag.

By the way, this kind of fixed header nav is applied to all pages in the site unless it is specially designed.

If that’s the case, I think it’s better to apply padding to the body element in the first place.