Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

z-index - Propriété CSS

z-index

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

Description rapide
Plan d'affichage (dessus, dessous).
Statut
Standard
Type de valeur
Entier
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété z-index passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Éléments positionnés
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

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

1
2
3

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.

1
2
3
4

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

  • z-index: initial; z-index: inherit; z-index: revert; z-index: revert-layer; z-index: unset;

    La valeur initiale est : auto.

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.
1
2
3
4
5
6

Simulateur.

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

z-index :
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.

1
z-index
Estimation de la prise en charge en pourcentage du parc actuel.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que z-index.

Les spécifications CSS éditées par le W3C sont organisées en modules. z-index fait partie du Module CSS - Éléments positionnés (CSS Positioned Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
Pur un élément positionné, définit l'emplacement du côté fin de block.
Définit l'emplacement d'en élément positionné.
Sur un élément positionné, définit l'emplacement du bord situé en fin de ligne.
Pour un élément positionné, définit l'emplacement du côté début de ligne.
Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de son parent.
Mode de positionnement.
Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de son parent.
Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de son parent.