Le positionnement absolu d'un élément entraîne l'affichage de l'élément dans IE

J'ai une liste dans laquelle j'aimerais que les éléments principaux s'alignent verticalement et que les sous-éléments de chacun d'eux se déroulent sous l'élément principal. Je veux garder la position: absolute sur la classe subNav car la largeur de ce nav varie de chaque sorte que je ne peux pas définir une largeur. Cela fonctionne dans Firefox, mais dans IE 7 l'absolu provoque l'affichage en ligne du subnav (donc décalé vers la droite et vers le haut d'où je voudrais). Comment puis-je réparer cela?Le positionnement absolu d'un élément entraîne l'affichage de l'élément dans IE

Exemple:

<style> 
#nav ul, #nav li ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav li { 
    float: left;  
    width: 120px; 
    border-right: 1px solid #000; 
    padding: 10px; 
} 
#nav li ul li { 
    float: none;  
    width: auto; 
    height: auto; 
    border-right: none; 
    text-align: left; 
    padding: 0; 
} 

#nav .subNav { 
    background: #eee; 
    position: absolute; 
    padding: 10px; 
} 
</style> 
</head> 

<body> 
<div id="nav"> 
    <ul> 
    <li>Main One     
      <ul class="subNav"> 
     <li>Sub One A</li> 
     <li>Sub One B</li> 
     </ul>   
    </li> 
    <li>Main Two  
     <ul class="subNav"> 
     <li>Sub Two A</li> 
     <li>Sub Two B</li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body>

Source

2009-08-17 Anonymous

Ne pas oublier de mettre vos valeurs haut et à gauche.

nav .subNav{ 
    top:10px; 
    left:20px; 
} 

nav.containerDiv { 
    position:relative; 
}

HTML

<ul class="nav"> 
    <li> 
     <div class="containerDiv"> 
     <ul class="subNav">... 
     </div> 
    </li> 
</ul>

Cela se traduira par la subnav étant par rapport au conteneur div, au lieu du document entier.

Source

2009-08-17 19:18:38 Zoidberg

Mais si je mets une position à gauche sur le subNav, qui a un positionnement absolu, alors tous les éléments subNav apparaîtront verticalement au même endroit que je ne veux pas. Je veux qu'ils apparaissent directement sous leur contrepartie principale. –

Ensuite, placez un div autour de la liste de sous-nav et faites en sorte que ce div ait une position relative position: relative; et assurez-vous que votre div sub nav est à l'intérieur de ce div. Ce que css fera est de rendre le positionnement absolu au premier élément parent avec la position relative ou la position absolue, dans ce cas, votre nouvelle div. Je vais modifier la réponse pour montrer cela – Zoidberg

Le positionnement absolu d'un élément entraîne l'affichage de l'élément dans IE

Répondre

Questions connexes