Z-index en CSS
La leçon Position a placé les boîtes. z-index répond à la question suivante : quand deux boîtes se chevauchent, laquelle est plus proche du lecteur ? Pensez à des feuilles de papier sur un bureau — les plus hautes couvrent les plus basses. Apprenez les règles du quotidien avant d’inventer d’énormes nombres.
Une boîte à outils z-index
📊 Z-index en un coup d’œil
| Idée | Rôle au quotidien |
|---|---|
z-index |
Fixe l’ordre de peinture entre frères qui se chevauchent dans le même stacking context |
| D’abord positionné | Besoin en général d’un position autre que static (ou de certains enfants de layout moderne) |
| Le plus haut gagne | Les entiers plus grands se peignent plus tard — ils apparaissent au-dessus |
auto |
Par défaut — suivre l’ordre du document et les règles du contexte parent |
| Stacking context | Une « cage » — les enfants se comparent entre eux, pas avec toute la page |
| Échelle calme | Préférez de petits pas (1, 2, 10) et des rôles nommés plutôt que des courses à 9999 |
z-index ne déplace pas une boîte à gauche ou à droite. Il change seulement qui couvre qui lorsque les boîtes partagent déjà le même espace à l’écran.
Relever un badge au-dessus de sa carte
Donnez à la carte un foyer positionné, puis relevez le badge avec un z-index modeste. L’ordre des frères peut suffire, mais un calque explicite rend l’intention lisible.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
Overlay au-dessus de la page
Les modales et tiroirs se placent en général au-dessus du contenu ordinaire. Associez un overlay positionné à un numéro de calque clair — et gardez volontairement le contenu de page plus bas.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
Comparez les frères, pas le monde entier
Entre frères dans un même contexte, le z-index le plus élevé gagne. En cas d’égalité, les frères plus tardifs dans le DOM se peignent en général au-dessus. Commencez les comparaisons dans un parent avant de poursuivre des guerres à l’échelle de la page.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
Les stacking contexts enferment les enfants
Un parent avec son propre stacking context (par exemple positionné + z-index) peut piéger ses enfants. Un enfant avec z-index: 999 ne saute pas au-dessus d’un frère hors de ce parent si le parent lui-même est plus bas. Corrigez le calque du parent — n’inflez pas seulement l’enfant.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
Une habitude z-index calme
Nommez des rôles (--layer-badge, --layer-modal) ou utilisez une petite échelle. Évitez 99999 sauf en débogage. Souvenez-vous : le placement est position ; l’empilement est z-index ; le clear de float attend les prochaines leçons.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
Essayez vous-même
- Placez un badge absolute sur une carte relative et mettez
z-index: 2. - Construisez un fond/modale fixed avec
z-index: 10au-dessus du contenu de page à1. - Donnez à deux frères absolute qui se chevauchent des z-index différents, puis inversez-les.
- Emboîtez un enfant à z-index élevé dans un parent à z-index bas — observez la cage.
- Réécrivez un « 9999 » en une échelle de custom properties nommée.
Erreurs courantes
- S’attendre à ce que
z-indexsur une boîtestaticordinaire réordonne tout - Combattre les stacking contexts en relevant seulement l’enfant imbriqué
- Courir avec
99999au lieu d’une échelle lisible - Traiter cette leçon comme Position (placement) ou Display (type de boîte)
- Utiliser z-index pour inventer des colonnes de page au lieu des outils de layout
Résumé
z-indexcontrôle qui se peint au-dessus quand les boîtes se chevauchent- Il a généralement besoin d’une position non static (ou de cas de layout particuliers)
- Les valeurs plus élevées gagnent dans le même stacking context
- Les contextes parents peuvent enfermer les enfants — corrigez le bon niveau
- Préférez de petites échelles nommées ; laissez float pour les leçons à venir
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut