Quelles sont les options de positionnement des éléments en CSS?

Il existe plusieurs options principales pour le positionnement des éléments en CSS:

• static — position par défaut. Les éléments sont placés dans le flux du document, sans décalage.
• relative — l'élément est positionné par rapport à sa position normale. On peut le déplacer avec top, left, bottom, right, tout en conservant sa place dans le flux.
• absolute — l'élément est positionné par rapport à l'ancêtre le plus proche avec une position différente de static (ou par rapport à la fenêtre si aucun). L'élément sort du flux.
• fixed — l'élément est fixé par rapport à la fenêtre du navigateur et ne bouge pas lors du défilement. Il sort aussi du flux.
• sticky — l'élément se comporte comme relative jusqu'à atteindre une position définie lors du défilement, puis comme fixed.

En plus du positionnement, pour disposer les éléments, on utilise souvent:

• Flexbox — modèle flexible pour aligner et distribuer l'espace entre les éléments en une seule dimension (ligne ou colonne).
• Grid — modèle de grille bidimensionnelle pour placer les éléments en lignes et colonnes.
• float — méthode obsolète pour faire flotter les éléments, utilisée pour créer des colonnes, mais moins courante aujourd'hui.

Exemple d'utilisation de position:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}