Problème avec div positionné dans un autre div absolument positionné

Je ne suis pas un expert CSS, surtout quand il s'agit de positionnement, et j'espère que celui-ci sera facile à résoudre.Problème avec div positionné dans un autre div absolument positionné

Voici mon code HTML simplifié:

<body> 
    <div style="height:100%;width:100%;"> 
     <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;"> 
      <!-- The controls div does not render correctly. --> 
      <div id="controls" style="left:10px;position:absolute;top:10px;"> 
      </div> 
      <!-- The legend and logos divs do render correctly. --> 
      <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
      </div> 
      <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

Le "contrôle" div n'est pas le rendu correctement. En fait, il ne s'affiche pas du tout. Si je sors le "top: 10px;" style, et le remplacer par "bottom: 400px;", il rend correctement. Cependant, ce n'est pas ce que je veux, car la hauteur de la div de «map» est ajustée si l'utilisateur redimensionne la fenêtre du navigateur. Je ne veux pas non plus utiliser JavaScript pour positionner la div.

Les divs "legend" et "logos" sont correctement rendus. Je fais mes tests dans Firefox.

Source

2010-12-10 Nate Irwin

Voici ce que j'ai fini avec. Merci, Sarfraz et sholsinger, pour me conduire dans la bonne direction:

<body> 
    <div style="height:100%;width:100%;"> 
     <div style="bottom:250px;position:absolute;top:0;width:100%">    
      <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;"> 
       <div id="controls" style="left:10px;position:absolute;top:10px;"> 
       </div> 
       <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
       </div> 
       <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
       </div> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

Je fondamentalement juste imbriquer la « carte » dans une div position absolue div et réglez-le sur « position; relative; ».

Il y avait deux problèmes dans l'exemple que j'ai posté:

Comme l'ont souligné sholsinger, la hauteur de ma « carte » div a été fixé à 100%, et cela a été le dimensionnement de la div à 100% de la fenêtre du navigateur. Le "bas: 250px;" poussait simplement cette div et hors de la page. Cela provoquait le contrôle des contrôles hors écran. J'aurais pu simplement configurer un nouveau style sur "controls" ("margin-top: 260px;") pour que l'affichage fonctionne correctement, mais cela n'aurait pas résolu le problème sous-jacent correctement.
Comme souligné par Sarfraz, la div "map" devait avoir "position: relative;" défini dessus de sorte que les contrôles absolument positionnés s'affichent correctement.

Les correctifs ci-dessus résolvent ces deux problèmes.

Source

2010-12-10 19:24:58

il vous suffit de donner le parent div une position définie sur relative et enfantsabsolute. Cette astuce CSS est expliqué ici:

Absolute Positioning Inside Relative Positioning

Source

2010-12-10 17:24:48 Sarfraz

À droite, mais si je mets "map" à "position: relative;" il ne rend pas correctement. –

D'accord. Le div de '# controls' est probablement rendu, mais vous avez' overflow: hidden' sur le parent, donc il est dessiné en dehors du parent et donc n'est pas montré. En outre, si la div parente '# map' étend' 250px' au-delà du haut de la page (ce qui devrait être le cas si votre CSS est rendu correctement), les contrôles seraient de toute façon hors écran. – sholsinger

@Nate: si vous supprimez le 'bottom: 250px' et changez ensuite' position: relative' sur 'div # map', la div interne devrait être là où vous le voulez. – sholsinger

Problème avec div positionné dans un autre div absolument positionné

Répondre

Questions connexes