Z-Index expliqué: Comment empiler des éléments à l'aide de CSS

J'ai toujours eu du mal avec la propriété CSS z-index. Cela semble si facile au début. Les éléments avec une valeur d'index z plus élevée sont affichés devant ceux avec une valeur d'index z inférieure. Pourtant, je me suis souvent retrouvé dans des situations où il semble que la valeur de l'indice z n'ait aucun effet.

J'ai décidé que j'en avais assez d'essais et d'erreurs avec z-index et que je voulais avoir une meilleure compréhension. J'espère que cet article pourra vous aider afin que vous ne vous demandiez jamais pourquoi z-index ne fait pas ce que vous attendez de lui.

Ordre d'empilement par défaut

Mentionnons d'abord l'ordre par défaut dans lequel le navigateur empile les éléments, lorsqu'aucun z-index n'est appliqué:

  1. Élément racine (l'élément)
  2. Éléments non positionnés dans l'ordre dans lequel ils sont définis
  3. Éléments positionnés dans l'ordre dans lequel ils sont définis

Un élément non positionné est un élément avec la valeur de position par défaut static. Un élément positionné est un élément avec une autre valeur de position. Des exemples d'autres valeurs sont: absolues, relatives, persistantes ou fixes.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Nous avons défini la boîte verte en dernier dans le document. Pourtant, il apparaît derrière les autres car il n'est pas positionné.

Empilement avec z-index

Si nous voulons maintenant changer l'ordre d'empilement de ces éléments, nous pouvons utiliser la propriété z-index. Un élément avec un z-index plus élevé sera affiché devant un élément avec un z-index inférieur. Une chose à noter est que z-index ne fonctionne qu'avec des éléments positionnés .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

La boîte orange avec un z-index plus élevé est affichée devant la boîte bleue.

Contexte d'empilement

Disons que nous ajoutons une autre boîte positionnée à la mise en page que nous voulons positionner derrière la boîte rose. Nous mettons à jour notre code comme suit:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Notre boîte rose est affichée devant la boîte violette comme prévu, mais qu'est-il arrivé à la boîte orange? Pourquoi est-il tout d'un coup derrière le bleu alors qu'il a un z-index plus élevé? En effet, l'ajout d'une valeur z-index à un élément forme ce que l'on appelle un contexte d'empilement .

La boîte rose a une valeur d'index z autre que auto, qui forme un nouveau contexte d'empilement. Le fait qu'il forme un contexte d'empilement affecte la façon dont ses éléments enfants sont affichés.

Il est possible de modifier l'ordre d'empilement des éléments enfants de la boîte rose. Cependant, leur z-index n'a une signification que dans ce contexte d'empilement . Cela signifie que nous ne pourrons plus déplacer la boîte orange devant la boîte bleue, car ils ne sont plus dans le même contexte d'empilement.

Si nous voulons que la boîte bleue et la boîte orange fassent partie du même contexte d'empilement, nous pouvons définir la boîte bleue comme un élément enfant de la boîte rose. Cela fera apparaître la boîte bleue derrière la boîte orange.

Les contextes d'empilement ne sont pas uniquement formés lors de l'application de z-index à un élément. Il existe plusieurs autres propriétés qui font que les éléments forment des contextes d'empilement. Quelques exemples sont: filtre, opacité et transformation.

Revenons à notre exemple précédent. La boîte bleue est à nouveau un frère de la boîte rose. Cette fois, au lieu d'ajouter un z-index à la boîte rose, nous lui appliquons un filtre.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

La boîte orange a toujours un z-index plus élevé que le bleu, mais est toujours affichée derrière elle. Cela est dû au fait que la valeur du filtre a amené la boîte rose à former un nouveau contexte d'empilement.

Sommaire

En utilisant z-index sur les éléments positionnés, nous pouvons changer l'ordre d'empilement par défaut.

Lors de l'application de certaines propriétés CSS, un élément peut former un contexte d'empilement. Les valeurs d'index Z n'ont une signification que dans le même contexte d'empilement.

Pour plus d'informations sur z-index, je recommande cet article. Je m'en suis beaucoup inspiré en écrivant ceci.

Merci d'avoir lu! :)