position relative elements after absolute elements

Question

I have a site with absolute positioned elements on it, for example the top Navigation of the site:

#topNav
{
  position:     absolute;
  top:          100px;
  left:         50%;
  height:       40px;
  width:        1000px;
  margin-left:  -500px;
}

Now I created a sticky footer like on the following site: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Now, the problem is that the footer will "overlap" the topNav, because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.

Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?

EDIT: JsFiddle here: http://jsfiddle.net/dkxUX/15/

When you scale down your browserwindow you'll find #footer overlapping all elements before it.

Answer 1

You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.

Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.

/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}

Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.