Pourquoi ma position enfant absolue est-elle placée par rapport à la fenêtre du navigateur au lieu de sa position parent relative?

Question

J'ai ces deux divs, l'un dans l'autre, et j'ai les styles définis. L'encapsulation est relative et l'enfant est absolu.

L'enfant n'est-il pas censé être positionné en fonction du coin supérieur gauche de la div externe, #RightSection?

Au lieu de cela, il le fait en fonction de la fenêtre du navigateur, des prospects?

 <div id="RightSection"> 
      <div id="Panels"> 

      </div> 
     </div> 

#RightSection 
{ 
    position: relative; 
} 

#Panels 
{ 
    position: absolute; 
    background-color: Blue; 
    width: 100px; 
    height: 100px; 
    z-index: 9000; 
} 

Answer 1

Le positionnement absolu à l'intérieur des éléments relatifs est supposé faire ce que vous décrivez, mais ce comportement n'est pas toujours pris en charge. Quel navigateur utilisez-vous et quelle DTD utilisez-vous? Pour plus de détails, voir http://www.brainjar.com/css/positioning/default4.asp pour plus de détails. Il a également une démo du positionnement afin que vous puissiez vérifier qu'il fonctionne ou non dans votre navigateur.

Je peux confirmer que cela ne fonctionne pas dans IE6. Cependant, je ne peux pas garantir d'autres navigateurs pendant que je suis au travail. Une brève recherche en ligne me porte à croire que ce problème existe aussi dans IE7, et pourrait être un problème dans IE8 tant qu'il est en mode IE7.

Answer 2

J'ai également trouvé que si je ne déclare pas les paramètres CSS haut et à gauche pour les éléments absolument positionnés, il semble ignorer un parent au-dessus de lui et juste sauter au corps de la page.

Essayez tout en lui donnant les paramètres haut et à gauche, voir si elle aide,

#Panels 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: Blue; 
    width: 100px; 
    height: 100px; 
    z-index: 9000; 
} 

Il devrait ressembler très bien une fois que vous ajoutez à ces paramètres par défaut.