Comprendre z-index en CSS

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS z-index.

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

  1. L'empilement sans z-index : Règles d'empilement par défaut
  2. L'empilement et float : Comportement des éléments flottants
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
  4. L'empilement de couches : Remarques sur l'empilement de couches
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau