La Cascade

Rechercher

Comment fonctionne z-index

par Ire Aderinokun, 02 novembre 2015, css, html, article original paru le 20 octobre 2015 dans Bits of Code

Ç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.


Ç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 CSS 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;
}
Voir la liste des articles de Ire Aderinokun traduits dans La Cascade.
article original paru le 20 octobre 2015 dans Bits of Code
Traduit avec l'aimable autorisation de Bits of Code et de Ire Aderinokun.
Copyright Bits of Code © 2015