Qui passe devant ?

🎯 Objectif

Deux exercices qui marchaient très bien se disputent une fois réunis. Une déclaration pour les départager — et une condition à ne jamais oublier.

📖 Exemple

La bibliothèque du Coteau affiche ses deux coups de cœur en cartes qui se chevauchent. Sans instruction, la seconde — la dernière écrite dans le HTML — passerait devant. Regarde la fenêtre : c'est pourtant la première qui gagne, parce qu'elle porte un ordre d'empilement :

<div class="coup-de-coeur romans">Romans de l'été</div>
<div class="coup-de-coeur bd">BD du mois</div>

.coup-de-coeur {
    position: relative;
    width: 150px;
    padding: 30px 12px;
    border: 2px solid #1e293b;
    background-color: #ffffff;
}

.romans {
    z-index: 20;
}

.bd {
    margin-top: -40px;
    margin-left: 70px;
}

Pourquoi 20 gagne-t-il ? Entre deux éléments positionnés qui se recouvrent, la règle par défaut du navigateur est « le dernier écrit dans le HTML passe devant ». z-index tranche explicitement : le plus grand nombre l'emporte — 20 contre rien, les romans restent devant. C'est un nombre nu, sans unité : il ne mesure pas une distance, il classe des couches, comme les étages d'un immeuble.

Et la condition qui piège tout le monde :

z-index n'agit que sur un élément positionné : relative, absolute, fixed ou sticky. Sur un élément resté en static, il est ignoré en silence — pas d'erreur, pas de message, pas d'effet.

D'où le premier réflexe de diagnostic : avant de monter la valeur, vérifie que l'élément est positionné.

📝 Consigne

Tu retrouves l'en-tête collant de 8.4 et les badges épinglés de 8.3. Chacun marche ; ensemble, ils se disputent. Fais défiler l'aperçu : les cartes et leurs badges — tous positionnés, tous écrits après l'en-tête dans le HTML — passent par-dessus le bandeau doré au lieu de glisser dessous.

Dans l'onglet CSS, ajoute une seule déclaration à la règle .entete : l'ordre d'empilement z-index, avec la valeur 10. L'en-tête est déjà en sticky, la condition est donc remplie. Ne touche à rien d'autre : on élève l'en-tête, on ne dépingle rien.