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
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 haut par défaut ?
Si le z-index ne fonctionne pas, quelle propriété devez-vous inspecter sur votre élément ?
position
animation
display
relative
Le Flexbox et la grille ont-ils besoin de position: relative
?