Z-index

La barre de navigation est fixée en haut de l'écran, une photo de pyramide défile en dessous - et soudain, la photo passe par-dessus le menu et cache ses boutons. Les deux éléments occupent le même endroit de l'écran, et le navigateur doit décider lequel se trouve au-dessus. Tu peux prendre cette décision toi-même grâce à la propriété z-index.

La propriété z-index en CSS est un outil qui permet de contrôler l'empilement des éléments les uns par rapport aux autres le long de l'axe Z, autrement dit la « profondeur ». Grâce à elle, on peut déterminer quel élément doit s'afficher au-dessus et lequel en dessous. Imagine la table d'un scribe, sur laquelle des papyrus sont posés les uns sur les autres : tu ne vois en entier que celui du dessus, et z-index est le numéro qui dit dans quel ordre les empiler.

Qu'est-ce que le z-index ?

La propriété z-index détermine comment les éléments se chevauchent lorsqu'ils occupent le même espace à l'écran. C'est une valeur entière (positive, négative ou nulle) qui détermine à quel point un élément est placé « en avant » ou « en arrière » par rapport aux autres éléments. La valeur par défaut est auto, et le nombre n'a pas d'unité - tu écris z-index: 10, et non 10px.

Un élément avec une valeur plus élevée recouvre un élément avec une valeur plus faible, donc une pile 1, 10, 100 et 999 s'ordonne du bas vers le haut. Seuls les rapports entre les nombres comptent : 2 au-dessus de 1 fonctionne exactement comme 999 au-dessus de 998.

Comment fonctionne le z-index ?

La propriété z-index ne fonctionne qu'avec les éléments dont la position est définie sur relative, absolute, fixed ou sticky. Avec la valeur par défaut position: static, le navigateur l'ignore tout simplement - c'est la raison la plus fréquente pour laquelle « le z-index ne marche pas ». Les éléments flex et grid, que tu découvriras dans les modules suivants, font exception. L'utilisation la plus simple est un élément positionné en absolu, auquel on donne un z-index égal à 1 :

1div {
2  position: absolute;
3  z-index: 1; /* L'élément sera au-dessus des autres éléments ayant une valeur de z-index plus faible */
4}

Les deux déclarations doivent fonctionner ensemble : supprime position, et le z-index cessera de fonctionner, sans que le navigateur signale la moindre erreur. Voyons maintenant deux papyrus qui occupent le même emplacement :

1.papyrus-ramses {
2  position: absolute;
3  z-index: 2;
4}
5
6.papyrus-kheops {
7  position: absolute;
8  z-index: 1;
9}

C'est le papyrus de Ramsès qui se trouve au-dessus, car 2 est plus grand que 1 - même s'il précède le papyrus de Khéops dans le HTML. Sans z-index, c'est le code qui déciderait de l'ordre : l'élément écrit en dernier se trouverait au-dessus.

Cas d'utilisation

La propriété z-index est particulièrement utile lorsque tu veux que certains éléments soient visibles au-dessus des autres - comme le sceau du pharaon apposé par-dessus un rouleau.

Navigation

Si tu veux que la barre de navigation reste toujours au premier plan, sans qu'aucun contenu qui défile ne la recouvre, tu peux utiliser z-index :

1.navbar {
2  position: fixed;
3  z-index: 1000;
4}

La déclaration position: fixed fixe la barre à la fenêtre du navigateur, et z-index: 1000 laisse une grande marge - toutes les couches ordinaires de la page tiendront en dessous.

Fenêtres modales et infobulles

Pour les fenêtres modales et les infobulles, z-index permet de les afficher au-dessus du reste de la page, par exemple au-dessus des photos et des cartes :

1.tooltip {
2  position: absolute;
3  z-index: 100;
4}

Une infobulle avec la valeur 100 recouvre le contenu ordinaire, mais passe elle-même sous la barre de navigation qui a la valeur 1000 - et c'est généralement exactement ce que l'on veut.

Problèmes potentiels

La gestion des valeurs de z-index peut devenir compliquée dans les grands projets. Définir trop de valeurs différentes peut entraîner des conflits et des difficultés à maintenir le code.

Le second piège est le contexte d'empilement (en anglais stacking context). Un élément positionné qui a un z-index défini crée sa propre pile, et ses enfants ne rivalisent qu'entre eux. Un enfant avec z-index: 9999 ne passera pas au-dessus du voisin de son parent si le parent lui-même se trouve plus bas. C'est comme un papyrus rangé dans un coffre : tu peux le poser tout en haut de la pile à l'intérieur, mais tu ne le feras pas passer au-dessus du couvercle. Un contexte d'empilement est aussi créé, entre autres, par une opacity inférieure à 1 et par transform, que tu découvriras à la fin de ce module.

Mon conseil : fixe dans ton projet quelques niveaux constants, par exemple 1 pour les superpositions ordinaires, 100 pour les infobulles et 1000 pour la navigation, et tiens-t'en à eux au lieu d'ajouter des nombres de plus en plus grands. Retiens : z-index est le numéro d'un papyrus dans la pile posée sur la table du scribe - le plus élevé est au-dessus, mais seulement si l'élément a une position définie.