Utilité du z-index

Vous avez un soucis dans la création, la retouche graphique ou dans votre feuille de style ? Un problème dans la manipulation de Gimp ou de Photoshop ? Ou encore mieux, des réponses à apporter ? C'est par là.
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Bonjour,

Je m'y connais plutôt bien en HTML / CSS mais je me posais une question, vu que j'avais vu ça récemment: à quoi sert le z-index ?

J'ai cherché sur internet, mais j'ai pas trop compris la façon dont ils expliquaient. J'aurais voulu tester ça par moi-même mais je sais comment et où le placer.

Y'aurait pas moyen de me donner un petit exemple concret histoire que je comprenne comment cela fonctionne? Merci d'avance ^^

Cordialement,
Didier07
Messages : 291
Inscription : 15 mai 2011 à 09:44

Je vais te donner un exemple très concret. Regarde mon site et pouquoi l'image d'en-tête bouge dérrière le logo de l'entreprise alors qu'elle n'est pas définie en background-image !

Dis moi si tu as compris après :)
Didier

PS : Firebug sera ton ami...
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Tu as fait un peu de géométrie ?

Axe X : →
Axe Y : ↑

Et l'axe Z, c'est celui qui devrait ressortir de ton écran.

En HTML, le z-index représente en fait un index de "superposition". Lorsque que deux div (par exemple), se superpose, le z-index va permettre d'en mettre un devant l'autre. (Plus le z-index est fort, plus l'élément aura de chance d'être devant les autres.)

Sache enfin que tu peux mettre le nombre que tu veux. (Un z-index=1000 par exemple, sans forcément en 999 avant.)
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

C'est dynamique en fait là, comment ça se fait? x)

EDIT: merci de ta réponse, mais pourquoi c'est pas simplement un true/false pour savoir si ça va être devant ou pas? Si c'est à la moitié, comment on sait?
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Non t'as pas compris. Il s'agit pas de définir le z-index d'un calque par rapport à un autre. Il s'agit de définir la superposition d'un calque, par rapport à tous les autres de la feuille. Tu veux avoir 4 calques qui se superposent (avec un décalage en X/Y, sinon, ça n'a aucun intérêt). Et bin dans ce cas, tu définiras tes z-index pour chaque calque, pour savoir dans quel ordre les superposer.
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Et genre y'en aura qui seront plus ou moins transparent suivant le z-index ?
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

C'est pas une question de transparence... Le z-index, permet juste de savoir lesquels seront devant les autres.

Regarde cette image, elle t'aidera peut être à comprendre.

Image
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Ca veut dire que si l'on met z-index 1 pour le premier, 2 pour le 2e et 3 pour le 3eme, c'est pareil que si l'on met 5, 90 et 500 ?
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Tout à fait. :)
Inconnu
Cet utilisateur a supprimé son compte et n’existe plus.
Messages : 6340
Inscription : 29 décembre 2010 à 18:15

Ok j'ai compris, merci :)
Répondre