I'm making a sticky menu bar that sticks itself to the top of the page with position:fixed, but I've run into a problem: the menu bar overlaps the content on the page. I want the content to be pushed below the menu bar so that it's completely visible. Here's a screenshot showing the overlap problem: http://a.imageshack.us/img256/7708/capturebs.png

Thanks!

1 answer

1
point
This was chosen as the best answer

Elements that have absolute or fixed positions do not have any effect on the placement of their siblings:

http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

One solution might be that when the sticky menu is present, add a dummy blank element (or padding or a margin) to the top of the regular content that is the same size as the sticky menu bar.

Answered over 8 years ago by Daniel Norton
  • That worked, thank you! soren121 over 8 years ago
  • Forgot to clarify, I used the dummy blank element suggestion. soren121 over 8 years ago