Z-index

z-index définit l'ordre d'empilement des éléments superposés.

.modal { position: fixed; z-index: 1000; }
.backdrop { position: fixed; z-index: 900; }

Il fonctionne sur les éléments positionnés (relative, absolute, fixed, sticky).

Plus la valeur est grande, plus l'élément passe au-dessus. Pense à garder une échelle simple (ex: 10, 100, 1000) pour rester cohérent.

A retenir

z-index ne fonctionne bien que si la stratégie de couches est claire. Définis une convention d'équipe pour éviter les conflits.

Astuce : documente une petite échelle commune (header: 100, menu: 200, modal: 1000) pour éviter les "99999".

Mini pratique

Superpose une modale et un backdrop, puis ajuste leurs z-index pour obtenir le bon ordre visuel.

Ajoute ensuite un menu fixe pour verifier que toutes les couches restent cohérentes ensemble.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.