Comment utiliser Z-Index en CSS
Positionnement des éléments qui se chevauchent avec des feuilles de style en cascade
axllll / iStock Vecteurs / Getty Images
L'un des défis lors de l'utilisation 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 HTML être au top, mais que se passe-t-il si vous ne le faites pas ou si vous voulez avoir des éléments qui ne se chevauchent pas actuellement avec d'autres pour le faire parce que la conception l'exige aspect 'en couches' ? Afin de modifier la façon dont les éléments se chevauchent, vous devez utiliser la propriété z-index de CSS.
Si vous avez utilisé des outils graphiques dans Word et PowerPoint ou un éditeur d'image plus robuste comme Adobe Photoshop , alors il y a de fortes chances que vous ayez 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 une option pour Envoyer au fond ou Mettre au premier plan certains éléments de votre document. Dans Photoshop, vous n'avez pas ces fonctions, mais vous avez le volet 'Calque' du programme et vous pouvez organiser l'emplacement d'un élément sur le canevas en réorganisant ces calques. Dans ces deux exemples, vous définissez essentiellement le z-index de ces objets.
Qu'est-ce que l'indice Z ?
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 connu sous le nom d'index x, tandis que celui de haut en bas est l'index y. C'est ainsi que vous positionneriez les éléments horizontalement ou verticalement, en utilisant ces deux index.
Quand cela vient à création de sites 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 où se trouve chaque élément dans la pile. Si l'index x et l'index y sont les lignes horizontales et verticales, alors l'index z 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. L'endroit où vous posez le papier est déterminé par le positionnement, et la quantité de celui-ci couverte par les autres éléments est l'index z.
- Le z-index est un nombre, positif (par exemple 100) ou négatif (par exemple -100).
- L'index z par défaut est 0.
L'élément avec le z-index le plus élevé est en haut, suivi du suivant le plus élevé et ainsi de suite jusqu'au z-index le plus bas. Si deux éléments ont la même valeur d'index z (ou s'il n'est pas défini, ce qui signifie que vous utilisez la valeur par défaut de 0), le navigateur les superposera dans l'ordre dans lequel ils apparaissent dans le code HTML.
Comment utiliser l'index Z
Donnez à chaque élément que vous voulez dans votre pile une valeur d'index z différente. Par exemple, si vous avez cinq éléments différents :
- élément A — indice z 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 — indice z de -3
Ils s'empileront 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 très différentes pour empiler vos éléments. De cette façon, si vous ajoutez plus d'éléments à la page plus tard, vous avez de la place pour les superposer sans avoir à ajuster les valeurs d'index z de tous les autres éléments. Par exemple:
- 100 pour votre élément le plus élevé
- 0 pour votre élément central
- -100 pour votre élément du bas
Vous pouvez également donner à deux éléments la même valeur d'index z. Si ces éléments sont empilés, ils s'afficheront dans l'ordre dans lequel ils sont écrits dans le HTML, avec le dernier élément en haut.
Pour qu'un élément utilise efficacement la propriété z-index, il doit s'agir d'un élément de niveau bloc ou utiliser un affichage de 'block' ou 'inline-block' dans votre fichier CSS.