How to make a fixed header in CSS

Posted in Tutorials

We are going to make a fixed header using CSS.  The result is as shown where the black header is fixed to the top of the browser even as the page scrolls up.

This is the CSS that is used to effect this…

The key is the …

position: fixed;

in the header.  The “top: 0” sets the header to the top of its parent element, which in our case is the body element.

With position fixed, it takes the header out of normal document flow, resulting in the header overlapping the body text because the header does not take up document space.  Hence we have to push the body down by 50px (which is the height of the header).

 

 

---