Quelle est la différence entre les différentes…

static - Position par défaut. L'élément est positionné selon le flux normal du document. Les propriétés top, right, bottom, left n'ont pas d'effet.
relative - L'élément est positionné par rapport à sa position normale dans le flux. Les propriétés top, right, bottom, left déplacent l'élément depuis sa position d'origine, mais l'espace qu'il occupe dans le flux est conservé.
absolute - L'élément est complètement retiré du flux normal du document. Sa position est déterminée par les propriétés top, right, bottom, left par rapport à l'ancêtre positionné le plus proche (avec position: relative, absolute, fixed ou sticky). S'il n'y a pas d'ancêtres, la position est relative au bloc initial <html>.
fixed - L'élément est complètement retiré du flux normal du document. Sa position est déterminée par les propriétés top, right, bottom, left par rapport à la fenêtre d'affichage (viewport). L'élément reste en place lors du défilement de la page.
sticky - L'élément est positionné comme relative jusqu'à ce qu'il atteigne la position définie par top, right, bottom, left, après quoi sa position devient fixed.

Tableau des différences:

Propriété	`static`	`relative`	`absolute`	`fixed`	`sticky`
Flux du document	Normal	Maintient	Se retire	Se retire	D'abord normal, puis se retire
Déplacement (`top` etc.)	Non	Par rapport à lui-même	Par rapport à l'ancêtre/viewport	Par rapport au viewport	Par rapport à lui-même, puis au viewport
Lors du défilement	Défile	Défile	Reste en place (si l'ancêtre est `fixed`) ou défile avec l'ancêtre	Reste en place	D'abord défile, puis reste en place

Exemple:

.static-box {
  position: static; /* Position par défaut */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Déplacement vers le bas depuis la position normale */
  left: 20px; /* Déplacement vers la droite depuis la position normale */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Ancêtre positionné */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Par rapport au conteneur */
  left: 50px; /* Par rapport au conteneur */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Par rapport à la fenêtre d'affichage */
  right: 10px; /* Par rapport à la fenêtre d'affichage */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Adhère en haut du viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Pour superposer d'autres éléments lors de l'adhérence */
}

Quelle est la différence entre les différentes méthodes de positionnement des éléments en CSS?