z-index - Propriété CSS
Résumé des caractéristiques de la propriété z-index
auto
auto
z-index
passe progressivement d'une valeur à une autre.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é CSSposition
. - 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
.
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 pourz-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é.
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.
Simulateur.
Le simulateur change la valeur de z-index
pour le bloc vert.
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
.
z-index
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.