la position des éléments relatifs après éléments absolus

Question

J'ai un site avec des éléments positionnés absolus sur, par exemple la partie supérieure de navigation du site:

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

Maintenant, je créé un pied de page collant comme sur le site suivant: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Maintenant, le problème est que le pied de page va "chevaucher" le topNav, parce que le topNav est positionné en absolu, ce qui signifie qu'il est "en dehors du flottement normal des éléments". La position relative ne "remarquera" pas qu'il y a le topNav avant. Avant de commencer à créer des «div diviseurs» supplémentaires pour chaque élément positionné en absolu, je ferais mieux de demander s'il existe de meilleures pratiques que «div diviseurs» ou ne devrais-je même pas utiliser la position absolue sur mes éléments?

EDIT: jsFiddle ici: http://jsfiddle.net/dkxUX/15/

Lorsque vous redimensionnez votre browserwindow vous trouverez tous les #footer se chevauchent d'éléments.

Answer 1

Vous pouvez simplement appliquer une marge/un rembourrage supérieur de 140px au corps ou à tout autre élément du conteneur, ce qui rendrait compte de la hauteur et du décalage du topNav. Mieux encore, ne placez pas la position à l'absolu dans ce cas - il me semble que tout ce que vous faites est de centrer horizontalement une div 1000px large.

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

Mise à jour: Je vois votre jsfiddle maintenant. Vous pouvez prendre en compte tous les éléments positionnés de façon absolue lors de la définition de la marge/marge comme suggéré dans le premier paragraphe Vous utilisez des éléments positionnés de manière absolue lorsque le flux de document normal est fiable.

Answer 2

un peu trop tard pour donner une réponse, mais cela peut aider quelqu'un dans le futur, je suis venu avec ce problème il n'y a pas si longtemps alors voici mon coup de feu, en utilisant jquery depuis que je ne pouvais pas une solution CSS qui ne supprimait pas la balise DOCTYPE (ce que vous ne devriez pas faire de toute façon).

Alors voilà.

$("#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"); 
      }); 

Alors oui, c'est tout ce qu'il ya à, vous suffit d'ajouter dynamiquement une autre div au début du conteneur dur placé sous la div absolue, qui forcera toutes les divs suivantes par rapport à moi placé après, C'est comme une solution claire pour quelqu'un qui n'a plus d'idées.