Contextes d'empilement / Stacking Contexts

1. Les éléments avec une position autre que static(la position par défaut) et un z-index négatif.
2. Les éléments type block non positionnés (statiques).
3. Les éléments flottants non-positionnés.
4. Les éléments inline, table et inline-block non positionnés. (et oui, les éléments inline sont au-dessus des block !)
5. Les éléments positionnés(autre que static) avec z-index: auto et les contextes d'empilement créés sans position + z-index, comme avec transform par exemple.
6. Les éléments positionnés qui ont un z-index autre qu'auto et pas de valeur négative. Ces éléments sont disposés en fonction de cette valeur (z-index: 5 est au-dessus de z-index: 3 etc …)

1. Z-index négatif

Ex : Transition de dégradés linéaires

2. Éléments display block

Ex : Superposition d'éléments

3. Éléments flottants

Ex : Carte stylée

Texte autour d'un cercle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ipsam asperiores nostrum dicta quisquam quod tempora, alias obcaecati at consequuntur ad voluptate unde nulla? Ut corrupti accusantium reiciendis aut, rem neque. Quae architecto quo enim fuga inventore quia, repellendus expedita?

4. Éléments en ligne et Block

Ex : Superposition d'éléments

5. Éléments positionnés et nouveaux contextes

Ex : Carte

6. Éléments positionnés + z-index !== auto

Ex : Superposition de nouveaux contextes d'empilement