J'ai un menu déroulant qui possède la structure HTML suivante: et j'ai les règles CSS suivantes: p> .menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
3 Réponses :
Définissez l'index Z du parent, puis définissez l'index Z de l'enfant.
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
J'ai essayé ça et ça ne semble pas fonctionner. Changer l'index Z de .Menu> LI a un effet sur .Menu> Li mais pas sur .SUB-Menu
Remarque également, le z-index est appliqué pour un élément contenu dans un relative positionnement. Comme correctement montré ci-dessus.
Vérifiez le z-index des éléments qu'il est censé apparaître ci-dessus. assurez-vous qu'ils sont plus bas.
Assurez-vous également que l'élément parent n'a pas eu le débordement caché.
Je pense avoir trouvé le problème. J'utilisais opacité sur la div contenant le menu. Pour une raison quelconque, cela a provoqué le z-index de ne pas fonctionner sur le sous-menu. Je ne suis pas sûr de savoir pourquoi c'est. Cela fonctionne bien maintenant que j'ai supprimé la règle d'opacité.
Wow, devait creuser un peu pour trouver ceci. Essayé de résoudre ce problème aussi bien, merci beaucoup! Quelle est étrange que la spécification d'une opacité sur la div contenant le menu provoque ce problème ...
Ce problème ne se produit-il que dans un navigateur spécifique?
Fabriquez un Etui de test Jsfiddle , ou même mieux fournir un lien direct à la page affligée.
Le problème se produit dans tous les navigateurs, j'ajouterai ce détail au poste principal.
Si vous avez résolu votre propre problème, «Postez votre réponse» indépendamment et que vous sélectionnez, c'est comme la réponse correcte