Fix a header to the screen

01 / 05

A header that does not disappear as you scroll

You know the sites where you read all the way down a long page and the band at the top stays there? That is fixed to the screen.

You can get back to the menu however far you have read, so it is a handy build when a page is long.

02 / 05

The third position, fixed

You used position before with relative (shift from where it was) and absolute (out of the flow, placed against the parent). Here comes the third, fixed.

fixed leaves the flow just as absolute does. What differs is what it measures against: not the parent but the screen itself. That is why it does not move when you scroll.

.header {  position: fixed;}

03 / 05

Stick it to the top left of the screen

You say where to put it the same way as with absolute, using top, left, right and bottom.

To sit it snugly at the top left of the screen, top: 0; and left: 0;. A header wants the full width, so add width: 100%; too.

.header {  position: fixed;  top: 0;  left: 0;  width: 100%;}

04 / 05

What sits in front is z-index here too

A band you fix can end up hidden by contents that come later. What decides which is in front is the z-index you used before.

The bigger the number, the nearer the front. You want a header right at the front, so writing about 10 keeps you safe.

.header {  z-index: 10;}

05 / 05

Leave space above the main content

A fixed band has left the flow, so it takes up no room. That means the first line of your main content hides under the header.

Add padding-top to the container of the main content and push it down by the height of the header. Have a go.

.main {  padding-top: 64px;}