Le menu sous la carte — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 6)

Le menu sous la carte

Positionnement et empilement · niveau 2

Énoncé

Un menu déroulant (position: absolute; z-index: 100) est placé dans un en-tête en position: relative; z-index: 1. Plus bas dans la page, une carte a position: relative; z-index: 2. Le menu déplié passe sous la carte.

Pourquoi le z-index: 100 du menu ne suffit-il pas ?
Le développeur essaie z-index: 99999 sur le menu. Est-ce mieux ?
Proposer deux corrections.

Corrigé

L'en-tête (relative et z-index: 1) crée un contexte d'empilement. Le z-index: 100 du menu ne compte qu'à l'intérieur de l'en-tête. Vu de la page, on compare l'en-tête (1) et la carte (2) : la carte gagne, avec tout son contenu au-dessus de tout celui de l'en-tête.
Non : aucun nombre, si grand soit-il, ne fait sortir le menu du contexte de l'en-tête.
Monter l'en-tête au-dessus de la carte (z-index: 10 sur l'en-tête, ce que fait la Librairie), ou supprimer le z-index de l'en-tête (avec z-index: auto, il ne crée plus de contexte, et le menu est comparé directement à la carte : 100 contre 2). La première est plus sûre, car un en-tête doit de toute façon rester au-dessus du contenu.