Care este diferența dintre diferitele metode de…

static - Poziția implicită. Elementul este poziționat conform fluxului normal al documentului. Proprietățile top, right, bottom, left nu au efect.
relative - Elementul este poziționat relativ față de poziția sa normală în flux. Proprietățile top, right, bottom, left deplasează elementul de la poziția sa inițială, dar spațiul ocupat în flux rămâne același.
absolute - Elementul este eliminat complet din fluxul normal al documentului. Poziția sa este determinată de proprietățile top, right, bottom, left față de cel mai apropiat strămoș poziționat (cu position: relative, absolute, fixed sau sticky). Dacă nu există astfel de strămoși, poziția se determină față de blocul inițial <html>.
fixed - Elementul este eliminat complet din fluxul normal al documentului. Poziția sa este determinată de proprietățile top, right, bottom, left față de fereastra de vizualizare (viewport). Elementul rămâne pe loc în timpul derulării paginii.
sticky - Elementul este poziționat ca relative până când atinge poziția definită de top, right, bottom, left, după care poziția devine fixed.

Tabelul diferențelor:

Proprietate	`static`	`relative`	`absolute`	`fixed`	`sticky`
Fluxul documentului	Normal	Păstrează	Se elimină	Se elimină	Mai întâi normal, apoi eliminat
Deplasarea (`top` etc.)	Nu	În raport cu sine	În raport cu strămoș/viewport	În raport cu viewport	În raport cu sine, apoi viewport
La derulare	Derulează	Derulează	Rămâne pe loc (dacă strămoșul este `fixed`) sau derulează cu strămoșul	Rămâne pe loc	Mai întâi derulează, apoi rămâne pe loc

Exemplu:

.static-box {
  position: static; /* Poziție implicită */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Deplasare în jos față de poziția normală */
  left: 20px; /* Deplasare spre dreapta față de poziția normală */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Strămoș poziționat */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* În raport cu containerul */
  left: 50px; /* În raport cu containerul */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* În raport cu viewport-ul */
  right: 10px; /* În raport cu viewport-ul */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Se lipește de partea superioară a viewport-ului */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Pentru suprapunere la lipire */
}

Care este diferența dintre diferitele metode de poziționare a elementelor în CSS?