Page 1 sur 2

Utilité du z-index

Publié : 4 avril 2012 à 21:51
par Inconnu
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,

Utilité du z-index

Publié : 4 avril 2012 à 22:04
par Didier07
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...

Utilité du z-index

Publié : 4 avril 2012 à 22:15
par Inconnu
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.)

Utilité du z-index

Publié : 4 avril 2012 à 22:17
par Inconnu
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?

Utilité du z-index

Publié : 4 avril 2012 à 22:24
par Inconnu
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.

Utilité du z-index

Publié : 4 avril 2012 à 22:25
par Inconnu
Et genre y'en aura qui seront plus ou moins transparent suivant le z-index ?

Utilité du z-index

Publié : 4 avril 2012 à 22:28
par Inconnu
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

Utilité du z-index

Publié : 4 avril 2012 à 22:33
par Inconnu
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 ?

Utilité du z-index

Publié : 4 avril 2012 à 22:35
par Inconnu
Tout à fait. :)

Utilité du z-index

Publié : 4 avril 2012 à 23:28
par Inconnu
Ok j'ai compris, merci :)