z-index

Le z-index est une propriété CSS qui contrôle l'ordre d'empilement des éléments qui se chevauchent sur une page. Un élément avec un z-index plus élevé s'affiche devant un élément de valeur plus basse. Il répond à une question simple : quand deux éléments se superposent, lequel est visible ?

Comment fonctionne l'empilement

Le z-index ne s'applique qu'aux éléments positionnés (dont la position n'est pas static) et aux enfants d'un flex ou d'une grille. Les valeurs peuvent être positives ou négatives, et le navigateur peint les valeurs élevées au-dessus.

• .modal { position: fixed; z-index: 1000; }
• Sans z-index, les éléments se peignent dans l'ordre du HTML.

L'ordre de peinture

Le navigateur peint par couches : d'abord les arrière-plans, puis les blocs non positionnés, puis les éléments flottants, puis les éléments positionnés triés par z-index. Quand deux éléments partagent le même z-index, celui placé plus loin dans le HTML l'emporte.

Les contextes d'empilement

Un contexte d'empilement est un groupe de couches qui s'empilent comme une unité. Plusieurs propriétés en créent un discrètement, ce qui est la source habituelle de confusion.

Pourquoi le z-index échoue

La plupart des problèmes viennent d'une position manquante ou d'un parent qui a créé un contexte d'empilement et piège l'enfant à l'intérieur. Un z-index de 9999 ne peut pas sortir du contexte de son parent : il reste donc derrière un frère de ce parent qui a une valeur plus élevée. À l'intérieur d'un contexte, les z-index des enfants ne se comparent qu'entre eux.

Bonnes pratiques

• N'ajoutez un z-index que là où des éléments se chevauchent vraiment.
• Utilisez une échelle réduite et documentée (par exemple 10, 100, 1000) plutôt que de grands nombres arbitraires.
• Gardez une trace des composants qui créent un contexte d'empilement (transformations, opacité, filtres), pour diagnostiquer facilement les surprises.

Le z-index chez BeBranded

Chez BeBranded, nous gardons l'empilement prévisible avec une échelle de couches claire, pour que menus, modales et barres collantes ne se disputent jamais. Cela fait partie du front-end propre et maintenable que nous livrons via notre travail de design.