La propriété CSS position détermine la manière
dont un élément est placé dans une page Web
et comment il interagit avec les autres.
Les 5 valeurs principales
• static : C'est la valeur par défaut.
L'élément suit le flux normal du document.
Les propriétés top, right, bottom et left n'ont aucun effet.
• relative : L'élément est positionné par rapport
à sa position d'origine dans le flux normal.
L'espace qu'il occupait initialement est conservé,
et il est déplaçable avec top, bottom, left et right
.
• absolute : L'élément est retiré du flux normal.
Il est positionné par rapport à son ancêtre
le plus proche qui possède
une position définie (autre que static) ou, à défaut,
par rapport à la fenêtre du document.
• fixed : L'élément est retiré du flux normal
et positionné par rapport au viewport
(la fenêtre d'affichage du navigateur).
Il reste fixe à l'écran même lors du défilement de la page.
• sticky : C'est un hybride entre relative et fixed.
L'élément se comporte comme relative
dans le flux normal jusqu'à ce qu'il atteigne
un seuil de défilement (top, etc.),
moment auquel il devient fixed.
Propriétés de décalage et de superposition
• top, right, bottom, left :
Permettent de spécifier les coordonnées
ou le décalage de l'élément
dès lors que sa position n'est pas static.
• z-index :
Gère l'ordre de superposition (axe Z)
des éléments positionnés.
Plus la valeur est élevée,
plus l'élément s'affiche au-dessus des autres.