Comment fonctionne z-index

Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!

Par

Ça n’a pas l’air évident à première vue, mais les éléments HTML sont générés en 3D. Alignés sur les axes des x et des y, les éléments peuvent en outre reposer sur l’axe des z, qui contrôle leur position dans la troisième dimension.

les trois axes x, y et z

Les marges, les float et autres propriétés permettant de décaler un élément contrôlent la façon dont un élément est positionné sur les axes des x et des y. Mais seule la propriété CSS z-index permet de contrôler la façon dont il repose sur l’axe des z.

La propriété z-index

La propriété z-index spécifie deux choses :

La propriété ne s’applique qu’aux éléments positionnés. Autrement dit, les éléments qui ont une position soit relative, soit absolute, soit fixed.

La propriété z-index peut prendre trois valeurs :

Valeur Description
auto Fixe le niveau d’empilement à 0 et ne crée pas de nouveau contexte d’empilement
<integer> Le niveau d’empilement est un nombre entier et un nouveau contexte d’empilement est créé
inherit Le niveau d’empilement est hérité de l’élément parent, ce qui ne crée pas de nouveau contexte d’empilement
z-index: auto | <integer> | inherit  

Niveau d’empilement

Le niveau d’empilement est la valeur attribuée à l’élément courant sur l’axe des z. Plus le nombre est élevé, plus l’élément se situe haut dans l’empilement et donc plus près de la surface de l’écran.

4 niveaux d’empilement, de 1 en bas à 4 en haut

S’il n’est pas spécifié par la propriété z-index, le niveau d’empilement d’un élément est établi en fonction de sa place dans le document. Les éléments déclarés plus tard dans le document ont un niveau d’empilement plus élevé par défaut.

Calculer le niveau d’empilement

En plus du z-index spécifié, le niveau d’empilement est contrôlé par un certain nombre de facteurs. Les éléments sont empilés dans l’ordre suivant.

Position Description CSS
1 (en bas) L’élément qui crée le contexte d’empilement z-index: <integer>
2 Éléments enfants ayant des niveaux d’empilement négatifs z-index: <negative integer>
position: relative | absolute | fixed
3 Élément enfants dans le flux, pas en ligne, non positionnés display: /* not inline */
position: static
4 Éléments enfants flottants non positionnés float: left | right
position: static
5 Éléments enfants dans le flux, en ligne, non positionnés display: /* inline */
position: static
6 Éléments enfants avec niveau d’empilement égal à 0 z-index: auto | 0
position: relative | absolute | fixed
7 (en haut) Éléments enfants avec des niveaux d’empilement positifs z-index: <positive integer>
position: relative | absolute | fixed

Contexte d’empilement

Lorsque nous spécifions le niveau d’empilement d’un élément à l’aide de la propriété z-index, nous ne spécifions pas toujours le niveau d’empilement de l’élément par rapport à chaque autre élément de la page. Le niveau d’empilement de l’élément est seulement défini par rapport à son contexte d’empilement.

Cela peut conduire à des situations bizarres où un élément ayant un z-index plus élevé ne se retrouve pas au-dessus d’un élément ayant un z-index plus bas.

Le contexte d’empilement peut être expliqué à l’aide des règles suivantes.

1 - Le contexte d’empilement par défaut est l’élément racine

Le contexte d’empilement par défaut pour tout document HTML est l’élément racine <html>. C’est pourquoi, à moins qu’un nouveau contexte d’empilement ne soit créé, le niveau d’empilement d’un élément est par défaut en relation avec celui de tous les autres éléments de la page.

2 - Créez un nouveau contexte d’empilement avec la propriété z-index

Nous créons un nouveau contexte d’empilement en donnant une valeur au z-index d’un élément. Cela a pour effet, d’une part de donner ce niveau d’empilement à cet élément, d’autre part de créer un nouveau contexte d’empilement.

Le nouveau contexte d’empilement s’applique à tous les enfants de cet élément. Leurs niveaux d’empilement sont maintenant situés à l’intérieur de ce contexte d’empilement et non dans le contexte racine.

Dans l’exemple qui suit, .foo appartient au contexte d’empilement 1, alors que .bar appartient au contexte d’empilement 2.

l’élément foo est dans le contexte racine, bar est au-dessus

3 - Les éléments ne peuvent pas être empilés au-dessus (ou en-dessous) du niveau de leur élément parent

Lorsque le niveau d’empilement de l’élément parent est défini, ses enfants ne peuvent pas être empilés au-dessus ou en-dessous de ce niveau (par rapport au contexte d’empilement de l’élément parent).

Dans l’exemple ci-dessous, même si .bar a un z-index plus élevé que .baz, il est toujours affiché en-dessous. Cela est dû au fait que dans le contexte d’empilement 1, .bar ne peut pas dépasser le niveau d’empilement 1.

.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }
//HTML
<div class="foo">  
  .foo
  <div class="bar">
    .bar
  </div>
</div>  
<div class="baz">  
  .baz
</div>  

et le CSS :

body {  
  background-color: rgb(230, 230, 230);
}
.foo {
  background-color: green;
  height: 300px;
  width: 500px;
  position: relative;
  z-index: 1;
}
.bar {
  background-color: blue;
  height: 200px;
  width: 200px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.baz {
  background-color: red;
  height: 250px;
  width: 300px;
  position: absolute;
  top: 150px;
  left: 400px;
  z-index: 2;
}
.foo,
.bar,
.baz {
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
}

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases CSS parus dans la Cascade.

Du même auteur, dans la Cascade :

Comment fonctionne CSS float
Comment fonctionne z-index
Contrôler le modèle de boîte
Cacher des éléments avec CSS
Styler les images non affichées
Sur :not et la spécificité
CSS Grid et le Saint Graal
CSS Initial, Inherit, Unset et Revert


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans Bits of Code.

Sur l’auteur : est UI Designer et Front-End Developer à Lagos, au Nigéria. Son blog Bits of Code s’adresse aux développeurs autodidactes comme elle, elle y explore la théorie cachée derrière les morceaux de code que nous écrivons, afin de mieux comprendre le développement web. On peut la suivre sur Twitter ou sur Github.

Traduit avec l’aimable autorisation de Bits of Code et de l’auteur.
Copyright Bits of Code © 2015.