IE problème de positionnement CSS

J'ai un balisage pour un menu contextuel qui fonctionne dans Firefox mais pas IE. Le problème est que le popup apparaît sous d'autres éléments et est imperméable à la valeur z-index. Un exemple exécutable complet est ci-dessous.IE problème de positionnement CSS

Maintenant, je sais qu'une solution est de ne pas positionner les divs comme étant relative, mais je ne peux pas le faire parce que, dans le vrai code, j'utilise scriptaculous et ajoute la "position: relative" ce qu'il doit faire. D'ailleurs, je ne pense pas que cela devrait avoir de l'importance.

Existe-t-il un autre correctif qui ferait fonctionner ce code à la fois pour IE et Firefox?

Exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>IE Problem</title> 
<style type="text/css"> 
.mydiv{ 
    position: relative; 
    background: yellow; 
    border: solid 1px black; 
} 
table{background:black;} 
td.menu{background:lightblue} 
table.menu 
{ 
    position:absolute; 
    visibility:hidden; 
    z-index:999; 
} 
</style> 
<script type="text/javascript"> 
function showmenu(elmnt){ 
    document.getElementById(elmnt).style.visibility="visible"; 
} 
function hidemenu(elmnt){ 
    document.getElementById(elmnt).style.visibility="hidden"; 
} 
</script> 
</head> 

<body> 
<div class="mydiv" onmouseover="showmenu('one')" onmouseout="hidemenu('one')"> 

    <a href="#">div one</a><br /> 
    <table class="menu" id="one" width="120"> 
    <tr><td class="menu"><a href="#">Item 1</a></td></tr> 
    <tr><td class="menu"><a href="#">Item 2</a></td></tr> 
    </table> 

</div> 
<div class="mydiv" onmouseover="showmenu('two')" onmouseout="hidemenu('two')"> 

    <a href="#">div two</a><br /> 
    <table class="menu" id="two" width="120"> 
    <tr><td class="menu"><a href="#">Item 1</a></td></tr> 
    <tr><td class="menu"><a href="#">Item 2</a></td></tr> 
    </table> 

</div> 
</body> 

</html>

Source

2008-11-23 dl__

L'index z est limité à l'intérieur du parent si le parent a une position: relative ou position: absolue.

La solution pour votre exemple est d'ajouter style = "z-index: 2;" au premier "mydiv" et z-index: 1; à la seconde.

Source

2008-11-23 21:52:10 Greg

Ceci est la réponse que je suis allé avec. Semble fonctionner même si le menu déroulant est un peu flickery sous IE comme je déplace la souris autour. –

Si vous déplacez les tables à l'extérieur des DIVs ça marche. Espérons que cela répond à vos besoins? Je pense que je serais confus aussi si j'étais un DIV et vous m'avez demandé de Z-commander quelque chose que je contiens au-dessus de moi.

Source

2008-11-23 21:51:28

Le problème avec cela, pas que vous auriez pu le savoir, est le menu fait partie de la div. J'utilise scriptaculous pour permettre aux divs d'être déplacés. Si quelqu'un bouge les divs, je veux que le menu l'accompagne. Je pourrais peut-être déplacer le menu lorsque le div est survolé. –

IE problème de positionnement CSS

Répondre

Questions connexes