Z-index - Propriété CSS

z-index

Résumé des caractéristiques de la propriété `z-index`

Description rapide

Définit sur quelle couche un élément doit s'afficher (dessus, dessous). Surtout utile pour des éléments positionnés.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Non.

Type d'animation

Integer : lors d'une animation, la propriété z-index passe d'un nombre entier à un autre, sans transition.

Module W3C

Module CSS - Éléments positionnés

Références (W3C)

🡇

🡅

CSS Grid Layout Module Level 2

Statut du document: CR (document candidat à la recommandation)

CSS Grid Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Schéma syntaxique de la propriété z-index
Plus de détails sur la syntaxe

Description de la propriété `z-index`.

z-index définit dans quel ordre se superposent les éléments, autrement dit, lequel masque les autres en étant au dessus. Autrement dit encore : z-index modifie le contexte d'empilement des éléments. La superposition de plusieurs éléments peut se produire dans plusieurs cas de figure :

Lorsque des éléments sont positionnés en absolu, relatif, fixe ou sticky : voir la propriété CSS position.
Dans une grille, lorsque des éléments sont positionnés de façon non automatique, des chevauchements peuvent se produire.

z-index accepte une valeur numérique sans unité. Plus cette valeur est élevée, plus l'élément est placé au dessus. On peut placer un élément derrière tous les autres (y compris le contenu non positionné) en attribuant une valeur négative à z-index.

Lorsque plusieurs éléments ont la même valeur de z-index, ils se positionnent dans l'ordre de leur arrivée dans le document : le dernier arrivé étant au dessus.

Chevauchement entre éléments positionnés.

Les trois blocs ci-dessous ont été positionnés en relatif, de façon à ce qu'il se superposent partiellement. Aucune propriété z-index n'a pas été définie : le bloc vert masque les autres car il est le dernier dans l'ordre du document HTML.

Chevauchement dans une grille.

Ce deuxième exemple présente une grille de trois lignes et trois colonnes, dont les éléments ont été forcés à un emplacement précis (pas de placement automatique). L'élément bleu (le premier dans l'ordre du document HTML) s'étend sur 2 lignes et 2 colonnes à partir de la première cellule. L'élément vert (le dernier) s'étend lui aussi sur 2 lignes et 2 colonnes. Son emplacement fait qu'il chevauche en partie l'élément bleu. Bien que étant le premier dans le document, le bloc bleu est devant les autres car sa propriété z-index a été définie à 1.

Quelques mots sur le contexte d'empilement.

En CSS tous les éléments sont positionnés suivant trois coordonnées: horizontal, vertical et la position suivant l'axe Z, qui est un axe qui va de l'écran aux yeux du lecteur. Cette dernière coordonnées est appelée "contexte d'empilement". Le contexte d'empilement est par défaut à 0, mais certaines propriétés comme z-index, opacity, position, etc. peuvent changer sa valeur.

Les éléments positionnés en static (c'est à dire les éléments qui s'affichent les uns à la suite des autres) ont un contexte d'empilement de 0. Les éléments positionnés en absolute, en fixed, etc. ont un contexte d'empilement supérieur. Les éléments ayant un contexte d'empilement supérieur sont toujours dessinés par dessus ceux qui ont un contexte inférieur.

Le contexte d'empilement peut être négatif, ce qui va placer les éléments en dessous du texte normal.

Le contexte d'empilement est imbriqué : les enfants d'un conteneur définissent le contexte d'empilement par rapport à celui de ce conteneur. Un élément d'un autre conteneur ne pourra pas venir s'insérer entre ces enfants, quelque soit la valeur affectée à son contexte d'empilement.

Voici quelques unes des propriétés qui modifient le contexte d'empilement :

position avec une valeur différente de static.
opacity avec une valeur inférieure à 1.
mix-blend-mode avec une valeur différente de normal.
transform et avec, pour transform une valeur différente de none.
filter avec une valeur différente de none.
clip-path avec une valeur autre que none.
Les propriétés de masquage : mask et les propriétés détaillées.
isolation avec la valeur isolate.
z-index avec une valeur différente de 0.
Etc.

Syntaxes pour `z-index`.

z-index: auto;

Valeur par défaut. L'élément à le même niveau que son parent.
z-index: 3;

L'élément est au dessus des éléments dont le z-index est inférieur à 3. Il est également au dessus des éléments qui ont la même valeur pour z-index et qui sont avant lui dans le code HTML.

Cette valeur est un nombre sans unité, positif ou négatif. Les valeurs négatives placent l'élément en dessous du contenu non positionné.

Valeurs communes :


z-index: initial  (auto)
z-index: inherit
z-index: revert
z-index: revertLayer
z-index: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `z-index`.

Pas mal de règles CSS ont été nécessaires pour réaliser l'animation ci-dessous.

Tous les blocs doivent avoir un z-index différent, sinon l'animation les "saute" tous d'un coup.
Pour pouvoir affecter un z-index à tous les blocs, il faut que ceux-ci soient positionnés (ici ils ont été positionnés en relatif).
Les blocs doivent avoir un fond non transparent, sinon on ne voit pas de différence entre un bloc qui est devant et un bloc qui est derrière.

Simulateur avec la propriété `z-index`.

Le simulateur change la valeur de z-index pour le bloc vert.

z-index :

auto

z-index:1

z-index:2

z-index:3

Prise en charge par les navigateurs (compatibilité).

Tous les navigateurs actuels supportent bien la propriété z-index.

Propriété
z-index

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `z-index`.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Première définition de la propriété z-index.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Mise en page par grille - Niveau 1

La description de la propriétéz-index se trouve maintenant dans le module CSS Grid Layout Module.

07 Avril 2011
Document de travail.
29 Septembre 2016
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 2

Pas de changement concernant la propriété z-index.

06 Février 2018
Document de travail.
18 Août 2020
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 3

19 Septembre 2024
Document de travail.

Voir aussi, à propos du positionnement.

Les propriétés en rapport avec la positionnement (différent de static) sont regroupées dans le module CSS Positioned Layout Module. C'est le cas de z-index et des propriétés suivantes :