z-index et contextes d'empilement

Podcast CSS – 019: z-index et contextes d'empilement

Supposons que vous ayez quelques éléments qui sont parfaitement positionnés, et sont censés être positionnés les uns sur les 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 lequel se trouve au-dessus de l'autre par défaut ? Pour savoir quel élément ferait cela, vous devez comprendre le z-index et les contextes d'empilement.

Z-index

z-index définit explicitement l'ordre des calques pour le code HTML en fonction de l'espace 3D du navigateur (l'axe Z). Il s'agit de l'axe qui indique les calques les plus proches et les plus éloignés de vous. Sur le Web, l'axe vertical est l'axe Y et l'axe horizontal 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 apparaîtront 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 alors le comportement par défaut est que l'ordre de la source du document dicte l'axe Z. Cela signifie que les éléments situés plus bas dans le document se trouvent au-dessus des éléments qui apparaissent avant eux.

Dans un flux normal, Si vous avez défini 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. Il s'agit d'un endroit courant où les utilisateurs rencontrent des difficultés avec z-index.

Ce n'est pas le cas si vous êtes dans un contexte flexible ou de grille, En effet, vous pouvez modifier le z-index des éléments Flex ou de 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 présente la valeur initiale auto pour z-index, l'élément .child sera placé derrière lui.

Ajoutez le code CSS suivant à .my-element. et l'élément .child ne se trouvera pas derrière.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

Parce que .my-element a désormais une valeur position qui n'est pas static et une valeur z-index autre que auto, un nouveau contexte d'empilement a été créé. Cela signifie que même si vous définissez .child comme z-index de -999, il ne resterait toujours pas derrière .my-parent.

Contexte d'empilement

Un contexte d'empilement est un groupe d'éléments ayant un parent commun et qui se déplacent de haut en bas sur l'axe Z.

Dans cet exemple, le premier élément parent a une z-index de 1, et crée un nouveau contexte d'empilement. Son élément enfant a une z-index de 999. À côté de ce parent figure un autre élément parent avec un enfant. Le parent a un z-index de 2 et l'élément enfant a également un z-index de 2. Comme les deux parents créent un contexte d'empilement, l'z-index de tous les enfants est basée sur celle de leurs parents.

z-index des éléments dans un contexte d'empilement sont toujours relatives à 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. comme opacity, will-change et transform. Vous pouvez voir la liste complète des établissements

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 du canevas. Il peint ensuite la page sur ce canevas. Si un élément devait changer, il change de position. Le navigateur doit alors revenir en arrière et retravailler ce qu'il doit peindre.

Pour optimiser les performances, le navigateur crée des couches composites qui se superposent au canevas. Voici un peu comme des notes adhésives: en déplacer une et la modifier n'a pas un impact énorme sur la toile globale. Une couche composite est créée pour les éléments comportant opacity, transform et will-change, car ils sont très susceptibles de changer, Le navigateur s'assure donc que les modifications sont optimales en utilisant le GPU pour appliquer les ajustements de style.

Ressources

• Forcer les couches
• Guide d'animations: Forcer la création d'un calque
• Comprendre le z-index

Testez vos connaissances

Tester vos connaissances sur le z-index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>