Démo du positionnement CSS
1) static (par défaut) + relative
Position normale (flow). top/left ne font rien.
Je reste dans le flow, mais je peux bouger avec top/left.
2) absolute : se place par rapport au parent “positionné”
L’élément ABSOLUTE se place dans ce cadre.
top/right
3) z-index : qui passe devant ?
Important : z-index marche surtout sur des éléments “positionnés”
(relative/absolute/fixed/sticky).
4) Centrage classique avec absolute + transform
5) Sticky dans une section
Scroll ici : le bloc sticky reste visible tant que tu es dans cette section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
Excepteur sint occaecat cupidatat non proident, sunt in culpa.