z-index
Détermine quel élément se trouve au-dessus quand des éléments se chevauchent.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant qu’entier
- S’applique à
- éléments positionnés, ainsi que les éléments flex et grid
- JavaScript
element.style.zIndex = "10"
Exemple
#.header {
position: sticky;
top: 0;
z-index: 10;
}<div class="stage" style="height: 130px; overflow: auto; padding: 0;">
<div class="header box" style="border-radius: 0">En-tête collant au-dessus du contenu</div>
<p style="padding: 0 12px">Faites défiler. Le contenu passe sous l’en-tête, car il a un z-index plus élevé.</p>
<p style="padding: 0 12px; position: relative;">Un paragraphe avec position: relative.</p>
<p style="padding: 0 12px">Un autre paragraphe.</p>
<p style="padding: 0 12px">Et encore un autre.</p>
</div>Définition et utilisation
#La propriété z-index détermine l’ordre d’empilement sur l’axe perpendiculaire à l’écran. Un élément avec une valeur plus élevée recouvre les éléments avec une valeur plus basse. Elle fonctionne sur les éléments positionnés ainsi que sur les enfants des conteneurs flex et grid.
La notion clé est le contexte d’empilement. Les éléments ne comparent leur z-index qu’au sein du même contexte. Si un parent crée son propre contexte (par exemple via z-index, une opacity inférieure à 1 ou transform), ses enfants ne pourront pas passer au-dessus des éléments extérieurs à ce contexte, même avec une valeur de 9999.
Sans z-index défini, les éléments se superposent dans l’ordre d’apparition dans le code : le plus récent recouvre le précédent.
Syntaxe
#z-index: auto | <entier>;Valeurs
#- L’élément 2 n’a pas de contexte propre et se retrouve sous les éléments 1 et 3.
<nombre>
La valeur la plus élevée du groupe, donc l’élément 2 se trouve au-dessus.<nombre négatif>
Une valeur négative cache l’élément sous les autres, voire sous l’arrière-plan du parent s’il n’a pas de contexte propre.
Valeurs en pratique
#auto
.demo { z-index: auto; }3
.demo { z-index: 3; }-1
.demo { z-index: -1; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt que de rivaliser avec des valeurs du type 9999, fixez une échelle, par exemple 10 pour l’en-tête, 100 pour le menu et 1000 pour les fenêtres modales.
- Quand
z-index« ne fonctionne pas », cherchez un ancêtre qui crée un nouveau contexte d’empilement viatransform,opacityoufilter.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.