web-dev-qa-db-fra.com

z-index ne fonctionne pas?

J'utilise jQuery pour faire apparaître un div, lorsque je clique sur un bouton -> l'arrière-plan devrait obtenir une opacité de 0,8 et le div apparu permettra à l'utilisateur de le laisser se connecter - tout va bien quand je n'utilise pas z-index, mais j'ai 4 divs (en-tête, contenu, pied de page et le div avec login-Form) l'en-tête doit avoir z-index: 3 et contenu z-index: 2 - sinon les ombres ne fonctionneront pas comme prévu.

Avec jQuery j'ajoute un div après la balise body qui contient le côté complet - donc je peux définir l'opacité, mais je dois ensuite définir le z-index pour la forme-div plus élevé que celui pour le div avec opacité - mais il ne fonctionne pas. L'index z de la forme-div est 999, l'autre div a 5

Des solutions de contournement ou quelque chose pour z-index?

22
Julie Nesh

Modifiez la position de l'élément.

position: relative;
51
Austin Brunkhorst

Vous devez faire quelque chose à propos de l'élément parent.

débordement: visible;

Ça vous ferait du bien.

10
steveluoxin

Vieille question mais je posterai quand même si quelqu'un d'autre cherche une solution.

z-index n'est pas aussi simple que cela puisse paraître. Faire un z-index sur element1 = 999 et sur element2 = 1 ne signifie pas toujours que element1 va être devant.

J'ai eu une situation similaire une fois, et j'ai changé le z-index avec jQuery lorsque j'ai eu besoin que l'élément soit devant, et cela a bien fonctionné. Cela signifie que z-index se soucie du temps QUAND vous lui avez donné cet index. Si vous voulez lui donner une valeur de 999, donnez-le juste au moment où vous voulez qu'il soit en tête. Cela pourrait le faire rester au top, mais d'autres règles pourraient toujours s'appliquer, à savoir: l'ordre d'empilement. C'est un sujet assez vaste à couvrir ici, donc je vais juste vous pointer ici: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ =

7
GotBatteries

Vous devez vous assurer que position est défini dans votre CSS. si tu veux z-index à implémenter dans l'élément régulier de HTML, puis ajoutez position:relative à votre élément.

2
Murali Krishna