Menu
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.
762
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
By using position: fixed on an element like the header, the element is removed from the stack and positioned relative to the browser window. That means it no longer takes up space and any elements positioned after it will adjust to fill up that area.
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/
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
