Content appearing behind fixed header

Question

I fixed the header section of a website, but the first div of the page appears behind the header; instead of starting from the end of the header.

Discompose

hi adeniyi, if you could make it more precise, like including some example, it will be easy for people to understand your question...always do proper formating, while including code and some images...Thanks! – Bruton

Please add the html code by editing your post. – Gladdie

Answer 1

When you apply position: fixed or position: absolute the element is being removed from the document flow, so the elements that come after treat it as a non-existent. That's why your div jumps up. To fix that apply a margin-top that equals to your header height - http://jsfiddle.net/2xjES/

Gwinn

What if the header height is variable depending on content? – Craunch

@AlexanderJank I'd recommend using position:sticky at that point, which will allow the other elements to automatically respect the height of the document, but will make the header stick to the top of the page when you scroll. Be sure to add a top value (top:0px for example) to let the header know when to start sticking. – Toyatoyama