Z-Index

2

Par défaut, le flux de la page, ou en anglais page flow, fait en sorte qu'une balise HTML se positionne toujours par-dessus celles qui la précède. Ainsi, dans le cas où deux balises se superposent, celle apparaissant en dernier dans le code affichera par-dessus la première.

Voir le CodePen de Simon Arnold (@smnarnold).

Il est cependant possible de modifier l'ordre d'empilement des balises en spécifiant une valeur de z-index. Attention, seules les balises ayant la propriété CSS position de défini à une valeur autre que static sont impactés par z-index.

Dans l'exemple ci-dessous, z-index: 1 est ajouté à l'élément vert 🟩. Remarquez cependant comment cette propriété n'a aucun effet tant qu'une position n'est pas définie.

Voir le CodePen de Simon Arnold (@smnarnold).

Contexte d'empilement

Les éléments partageant un même parent peuvent être déplacés en avant ou en arrière les uns des autres grâce à z-index, c'est ce que l'on appelle le contexte d'empilement.

Cependant, quand un parent à une position autre que static de défini, il créer un nouveau contexte d'empilement pour ses enfants. Ce contexte limite la portée du z-index des enfants à ce parent. Autrement dit, si le carré bleu 🟦 est par-dessus le carré vert 🟩 et que ce dernier contient un carré rouge 🟥, même si ce carré avait un z-index d'un million, celui-ci resterait sous le carré bleu 🟦 puisque son contexte d'empilement est limité à son parent, soit le carré vert 🟩.

Pour en savoir plus, voir cet article MDN à propos de z-index.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme