Geek Answers Handbook

Positional Relative Elements After Absolute Elements

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

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

Now I have created a sticky footer, as in the following site: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Now the problem is that the footer "overlaps" topNav, because topNav is positioned as absolute, which means "outside the normal element float." The relative position will not “notice” that there is topNav in front of it.

Before I start creating additional “pusher-dividers” for each element with absolute positioning, I would better ask if there are more efficient methods than “divider-pushers” or should I not even use an absolute position for my elements?

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

When you scale the browser window, you will see that #footer overlaps all the elements in front of it.

+4
source share
2 answers

You can simply apply the top edge / padding of 140px to the body or other element of the container, which will make the top height and offset topNav.

Better yet, do not set the position absolute in this case - it seems to me that everything you do horizontally centers the div with a width of 1000 pixels.

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

Update: now I see your jsfiddle. You can consider all absolutely positioned elements when adjusting margins / indentation, as suggested in the first paragraph. . You use absolutely positioned elements when you can rely on them.

+2
source

a little late to give an answer, but it may help someone in the future, I came up with this problem not so long ago, so here is my shot at it using jquery, since I could not come up with a CSS solution that did not remove the DOCTYPE tag (which you don’t have to do anyway).

So there it is.

 $("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>"); $(window).resize(function(){ $("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px"); });

So, yes, all that is for you, just dynamically add another div at the beginning of the container, rigidly placed under the absolute div, which will make all subsequent relative divs me fit after it, this seems like a clear fix for those who have run out of ideas .

+1
source

More articles:


All Articles