Ce violon devrait démontrer le problème:
Je veux que le sous-menu apparaisse sous le menu parent. J'avais alors cherché à l'étendre avec JavaScript pour faire glisser le menu de dessous sur la survolée de l'élément Parent Li.
NOT PAS FUSSED À propos du JavaScript mais ne peut pas comprendre comment styler les éléments pour atteindre la superposition souhaitée.
4 Réponses :
Cela ne fonctionne pas car vous appliquez un index Z sur l'élément parent qui rend la pile d'éléments d'enfant par rapport aux autres éléments dans le parent .
Une fois que vous avez attribué un élément une valeur pour
z-index (autre que Auto), que
élément établit son propre local
contexte d'empilement. Cela signifie que tous
des descendants de l'élément ont
leur propre ordre d'empilement, par rapport à
l'élément ancêtre.
Donc, si le parent a voir L'article ici pour une meilleure explication.
Si vous supprimez l'index Z sur le parent et définissez l'élément de fromage sur Voici le Fiddle mis à jour
espère que cela aide.
z-index: 9 et l'enfant est z-index: 8 , il est un peu comme attribuer un index Z de 9, 8
z-index: -1 , cela devrait fonctionner. Je ne suis pas sûr de tous les navigateurs, mais cela fonctionne de toute façon à Chrome.
z-index: -1 est séduisant, mais désagréable. Voir: jsfiddle.net/5sqxq/17 - Tout ce que j'ai fait est d'ajouter le wrapper div avec un arrière-plan.
Merci pour la facilité de mise en œuvre, je suis allé avec la réponse de Thirtydot ci-dessous. Je ne voulais pas vraiment mordre avec -ve z-index. Serait trop douloureux.
Quel est le désagréable de l'utilisation d'un index z négatif? Tout entier est parfaitement valide. Et imho, il lit en fait mieux sémantique si vous voulez que quelque chose apparaisse derrière son parent (vous déplaçez l'enfant à l'envers, au lieu de déplacer les parents en avant)
Avez-vous examiné la démo mise à jour ( jsfiddle.net/5sqxq/17 )? Le fond rouge recouvrant complètement l'élément avec z-index: -1 est désagréable .
Merci a tous. Tout ce que je voulais dire, c'est que je n'étais pas sûr des problèmes de navigateur croisé pour -ve Z-Index, donc allé avec le chemin du moindre résistance. Dates limites et tout ça ...
@THIRTTYDOT: OK, je vois ce que vous dites maintenant - c'est une solution fragile. désagréable est un étrange choix de mot.
J'aurais dû dire " z-index: -1 est séduisant, mais [il a un] désagréable [effet secondaire]". C'est ce que je voulais dire, de toute façon. Désolé pour la confusion.
vous ne le faites pas.
à la place, faites le Quelque chose comme ceci: http://jsfiddle.net/5sqxq/15/ A être le "Connexion" "" Bouton ".
Essayez de définir la position des conteneurs parent et des frères et sœurs à la relative. Son a fonctionné pour moi avant.
Et définissez également le zindex du conteneur parent.
Parfois, vous devez également régler les emplacements de haut / gauche / inférieur, généralement en haut et à gauche ferez.
Regardez les règles ci-dessous pour la manière dont les éléments sont empilés et que vous pouvez facilement proposer votre propre solution.
ex. Comme Thirtydot dit, donnez "Connexion" Les règles de l'ordre d'empilement et le contexte d'empilage ci-dessous sont de ce lien
L'ordre des éléments:
.utilisateur> Li> A Position, Relative ou absolu et z-index : 1
ordre d'empilement dans un contexte d'empilement
est le seul contexte d'empilement par défaut, mais n'importe quel élément peut être un élément racine pour un contexte d'empilement, voir les règles ci-dessous)
Lorsqu'un contexte d'empilement est formé
élément)