z-index confusion dans IE

Question

J'ai une ligne de divs flottantes qui révèlent un popup lorsque survolé. Le problème est le popup apparaît sous les divs suivants et je ne peux pas trouver un moyen d'utiliser z-index pour éliminer ce problème ... rien ne semble fonctionner.

EDIT: Avec l'aide j'ai résolu le problème mais pas dans IE7 ou ci-dessous.

Quelqu'un a des idées?

HTML

<div> 

    <div> 
     <img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" /> 
     <span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span> 
    </div> 

    <div> 
     <img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" /> 
     <span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span> 
    </div> 

    <div> 
     <img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" /> 
     <span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span> 
    </div> 

    <div> 
     <img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" /> 
     <span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span> 
    </div> 

</div> 

CSS

div {clear:both; padding:0 0 8px 0; border:none; width:576px;} 

div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}  

div div img { padding:1px; cursor:pointer; display:block;} 

div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif; border:2px solid #FFF; font-size:12px; display:none;} 

div div span img { position:absolute; bottom:-18px; left:34px;} 
div div span strong {font-size:14px; text-transform:uppercase;} 

et jquery pour créer les popups ...

$.fn.hoverAnimation = function() { 
    return $(this).each(function() { 
     return $(this).hover(function() { 
      $(this).find("span").slideDown(100); 
      $(this).css("background-color", "#000"); 
     }, function() { 
      $(this).find("span").slideUp(100); 
      $(this).css("background-color", "#B22222"); 
     }); 
    }); 
} 

$("div > div").hoverAnimation(); 

plus je l'ai établi dans jsFiddle here

Answer 1

Vous êtes tout à fait raison - IE7 ne fonctionnera pas correctement ce. Le problème est que IE7 élabore des index z basés sur les index z des éléments contenant qui doivent être explicitement définis. Chaque fois que vous position quelque chose va affecter son z-index. Cela vous met dans une situation difficile. Vous devez normalement définir l'élément parent sur position:relative; z-index:1 pour réinitialiser l'indexation z, mais cela ne fonctionnera pas dans votre cas, car vous devez le définir sur la première div et sur toutes les divs enfants (puisque vous utilisez position: relative sur ces éléments). Lorsque vous le définissez sur les divs enfants, ils commencent une nouvelle pile z-index qui vous laisse dans la même situation.

Mais j'ai une solution potentielle. Définissez uniquement position: relative sur les divs enfants lorsque le jQuery est en cours de lancement. Voir this example

Answer 2

solution à votre problème tout plus ne devrait être bien

span {z-index:200} 

copie de travail ici

http://jsfiddle.net/dfgsH/