Positionnement de la div absolue à l'intérieur du conteneur relatif

Question

Je possède une image et je souhaite afficher une division contextuelle de survol en survol de cette image. Voici mon code.

<div class="wrapper"> 
    <ul class="popup"> 
     <li><a href="#"Link 1</a></li> 
        <li><a href="#"Link 2</a></li> 
     <li><a href="#"Link 3</a></li> 
        <li><a href="#"Link 4</a></li> 
    </ul> 
    <img src="iOpenPopupOnHover.gif"/
</div> 
<div class="wrapper"> 
    <ul class="popup"> 
     <li><a href="#"Link 1</a></li> 
        <li><a href="#"Link 2</a></li> 
     <li><a href="#"Link 3</a></li> 
        <li><a href="#"Link 4</a></li> 
    </ul> 
    <img src="iOpenPopupOnHover.gif"/
</div> 
... 

Maintenant, j'utilise la position: relative pour le wrapper et la position: absolute pour le popup. Ceci est bcoz je veux positionner le popup en haut/centre par rapport à chaque image ..

Maintenant, le problème est alors que la position absolue semble être calculée par rapport à l'image, le popup est complètement contenue dans le div wrapper et le type de cultures de certains liens contextuels. Je veux que le popup complet s'affiche ... Comment résoudre ce problème?

Voici le CSS

.wrapper { 
    float: left; 
    position: relative; 
} 

.popup { 
    display: none; 
    width: 80px; 
    background-color: red; 
    position: absolute; 
    bottom: 105px; 
    left: 10px; 
} 

Answer 1

Quelque chose comme ça?

.wrapper { 
    float: left; 
    position: relative; 
    overflow: visible; 
}