What is the correct way to use position:fixed with no overlapping?

Question

So, I have my topbar which is just a div with position:fixed . What is the correct way to not overlap the content below?

Sure, I can wrap the content in a div and give it a margin-top of the same height as the topbar .

But what if I dynamically load content on the topbar which changes its height? I can dynamically change the margin-top of the content div as well, but is it the more elegant way to do this?

Answer 1

The only way to accomplish this is to add margin or padding to the page content below the header. When you use position:fixed , it is taken out of the page's layout calculation and the page's content needs to be adjusted to accomodate it.

You can also use Javascript to dynamically change the margin of the content based on the height of the header. Once the page loads, you can use something like jQuery's height() method to get the height of the header and then adjust the css for the page's content based on that result.