L'un des problèmes liés à l'utilisation du positionnement CSS pour la mise en page Web est que certains de vos éléments peuvent en chevaucher d'autres. Cela fonctionne bien si vous voulez que le dernier élément du code HTML soit au-dessus, mais que faire si vous ne le faites pas ou si vous voulez que les éléments qui ne se chevauchent pas actuellement le fassent, car la conception appelle ce regard "en couches" ? Afin de changer la manière dont les éléments se chevauchent, vous devez utiliser la propriété de CSS.
Si vous avez utilisé des outils graphiques dans Word et PowerPoint ou un éditeur d’image plus robuste tel que Adobe Photoshop, il est fort probable que vous ayez déjà vu quelque chose comme z-index en action. Dans ces programmes, vous pouvez mettre en surbrillance le ou les objets que vous avez dessinés et choisir l’option «Mettre à l’arrière» ou «Mettre au premier plan» certains éléments de votre document. Dans Photoshop, vous ne disposez pas de ces fonctions, mais vous avez le volet "Calque" du programme et vous pouvez organiser l'emplacement d'un élément sur le fond en réorganisant ces calques. Dans ces deux exemples, vous définissez essentiellement l'indice z de ces objets.
Qu'est-ce que Z-Index?
Lorsque vous utilisez le positionnement CSS pour positionner des éléments sur la page, vous devez penser en trois dimensions. Il existe deux dimensions standard: gauche / droite et haut / bas. L'index de gauche à droite est appelé index x, tandis que celui du haut vers le bas est l'indice y. Voici comment vous positionnez les éléments horizontalement ou verticalement, en utilisant ces deux index.
En ce qui concerne la conception Web, il y a aussi l'ordre d'empilement de la page. Chaque élément de la page peut être superposé au-dessus ou au-dessous de tout autre élément. La propriété z-index détermine l'emplacement de chaque élément dans la pile. Si x-index et y-index sont les lignes horizontales et verticales, alors z-index est la profondeur de la page, essentiellement la 3ème dimension.
Considérez les éléments d’une page Web comme des morceaux de papier et la page Web elle-même comme un collage. Le z-index est l'endroit où vous posez le papier en fonction de son positionnement et de la quantité de celle-ci couverte par les autres éléments.
- L'indice z est un nombre, positif (par exemple 100) ou négatif (par exemple -100).
- L'indice z par défaut est 0.
L'élément avec l'indice z le plus élevé est en haut, suivi de l'élément le plus élevé suivant et ainsi de suite jusqu'au index z le plus bas. Si deux éléments ont la même valeur d’index-z (ou si elle n’est pas définie, c’est-à-dire que la valeur par défaut est 0), le navigateur les superpose dans l’ordre dans lequel ils apparaissent dans le code HTML.
Comment utiliser Z-Index
Attribuez à chaque élément de votre pile une valeur z-index différente. Par exemple, si vous avez cinq éléments différents:
- élément A - z-index de -25
- élément B - indice z de 82
- élément C - z-index non défini
- élément D - indice z de 10
- élément E - z-index de -3
Ils vont empiler dans l'ordre suivant:
- élément B
- élément D
- élément C
- élément E
- élément A
Il est recommandé d'utiliser des valeurs d'index z extrêmement différentes pour empiler vos éléments. Ainsi, si vous ajoutez ultérieurement des éléments à la page, vous avez la possibilité de les superposer sans avoir à ajuster les valeurs d'indice z de tous les autres éléments. Par exemple:
- 100 pour votre élément le plus haut
- 0 pour votre élément central
- -100 pour votre élément de fond
Vous pouvez également attribuer à deux éléments la même valeur z-index. Si ces éléments sont empilés, ils s'afficheront dans l'ordre dans lequel ils ont été écrits en HTML, avec le dernier élément en haut.
Remarque: pour qu'un élément utilise efficacement la propriété z-index, il doit être un élément de niveau bloc ou utiliser un affichage de "bloc" ou "inline-block" dans votre fichier CSS.
