Podcast CSS – 019: z-index et contextes d'empilement
Supposons que vous ayez quelques éléments qui sont absolument positionnés et qui sont censés être superposés les uns aux autres. Vous pouvez écrire un peu de code HTML comme ceci:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Mais laquelle est superposée par défaut ? Pour savoir quel élément effectuera cette opération, vous devez comprendre le z-index et les contextes d'empilement.
Z-index
La propriété z-index définit explicitement l'ordre des calques pour le code HTML en fonction de l'espace 3D du navigateur, c'est-à-dire l'axe Z.
Il s'agit de l'axe qui indique les calques les plus proches de vous et ceux qui vous en éloignent.
L'axe vertical sur le Web est l'axe Y et l'axe horizontal est l'axe X.
La propriété z-index accepte une valeur numérique qui peut être un nombre positif ou négatif.
Les éléments s'afficheront au-dessus d'un autre élément s'ils ont une valeur z-index plus élevée.
Si aucun z-index n'est défini sur vos éléments, le comportement par défaut est que l'ordre des sources des documents détermine l'axe Z.
Cela signifie que les éléments plus bas dans le document se trouvent au-dessus des éléments qui apparaissent avant eux.
Dans le flux normal, si vous définissez une valeur spécifique pour z-index et que cela ne fonctionne pas, vous devez définir la valeur position de l'élément sur une valeur autre que static.
Les utilisateurs rencontrent souvent des difficultés avec les z-index.
Ce n'est toutefois pas le cas si vous vous trouvez dans un contexte Flexbox ou grille, car vous pouvez modifier le z-index des éléments Flex ou grille sans ajouter position: relative.
Z-index négatif
Pour définir un élément derrière un autre élément, ajoutez une valeur négative pour z-index.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Tant que .my-element possède la valeur initiale de z-index pour auto, l'élément .child se trouve en arrière-plan.
Ajoutez le code CSS suivant à .my-element. L'élément .child ne s'affichera pas derrière.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Étant donné que .my-element comporte désormais une valeur position autre que static et une valeur z-index autre que auto, il a créé un contexte d'empilement.
Cela signifie que même si vous définissez .child sur une z-index de -999, il ne se trouvera pas derrière .my-parent.
Contexte de empilement
Un contexte d'empilement est un groupe d'éléments qui ont un parent commun et qui se déplacent ensemble vers le haut et le bas de l'axe Z.
Dans cet exemple, le premier élément parent a une z-index de 1. Il crée donc un contexte d'empilement.
Son élément enfant a une z-index de 999.
À côté de ce parent, il y a un autre élément parent avec un enfant.
Le parent a une z-index de 2 et l'élément enfant a également une z-index de 2.
Étant donné que les deux parents créent un contexte d'empilement, le z-index de tous les enfants est basé sur celui de leur parent.
Les z-index des éléments d'un contexte d'empilement sont toujours relatifs à l'ordre actuel du parent dans son propre contexte d'empilement.
Créer un contexte d'empilement
Vous n'avez pas besoin d'appliquer z-index et position pour créer un contexte d'empilement.
Vous pouvez créer un contexte d'empilement en ajoutant une valeur pour les propriétés qui créent une nouvelle couche composite telles que opacity, will-change et transform.
Vous pouvez afficher la liste complète des propriétés ici.
Pour expliquer ce qu'est une couche composite, imaginez qu'une page Web est un canevas. Un navigateur utilise votre code HTML et CSS pour déterminer la taille de la toile. La page est ensuite peinte sur cette toile. Si un élément doit changer (par exemple, s'il change de position), le navigateur doit alors revenir en arrière et retravailler ce qu'il faut peindre.
Pour améliorer les performances, le navigateur crée des couches composites qui sont superposées au canevas.
C'est un peu comme des notes adhésives :
le déplacer et le modifier n'a pas un impact énorme sur la toile globale.
Une nouvelle couche composite est créée pour les éléments avec opacity, transform et will-change, car ils sont très susceptibles de changer. Par conséquent, le navigateur s'assure que ces modifications sont performantes en utilisant le GPU pour appliquer les ajustements de style.
Ressources
Testez vos connaissances
Tester vos connaissances sur le z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Quel article apparaît en premier par défaut ?
Si le z-index ne fonctionne pas, quelle propriété devez-vous inspecter sur votre élément ?
displayrelativepositionstatic.animationLes Flexbox et grille ont-ils besoin de position: relative ?
position: relative.