Milline on erinevus CSS-is elementide…

static - Vaikimisi asukoht. Element positsioneerub vastavalt dokumendi standardvoogule. Omadused top, right, bottom, left ei mõjuta.
relative - Element positsioneerub suhteliselt oma normaalse asukoha suhtes voos. Omadused top, right, bottom, left nihutavad seda algsest asukohast, kuid hõivatud koht voos jääb alles.
absolute - Element eemaldatakse täielikult dokumendi normaalsest voost. Selle asukoht määratakse omadustega top, right, bottom, left kõige lähemale positsioneeritud vanemaga (millega on position: relative, absolute, fixed või sticky). Kui selliseid vanemaid pole, määratakse asukoht <html> algbloki suhtes.
fixed - Element eemaldatakse täielikult dokumendi normaalsest voost. Selle asukoht määratakse omadustega top, right, bottom, left vaadetes (viewport). Element jääb paigale lehe kerimisel.
sticky - Element positsioneerub nagu relative, kuni kerimisel see jõuab määratud asukohani (top, right, bottom, left), pärast mida muutub selle asukoht fixed-ks.

Tabel erinevustest:

Omadus	`static`	`relative`	`absolute`	`fixed`	`sticky`
Dokumendi voog	Tavaline	Säilitab	Eemaldub	Eemaldub	Alguses tavaline, siis eemaldub
Nihutamine (`top` jms)	Ei	Suhteline iseendale	Suhteline vanemale/vaatesse	Suhteline vaatesse	Suhteline iseendale, siis vaatesse
Kerimisel	Kerib	Kerib	Jääb kohale (kui vanem `fixed`) või kerib koos vanemaga	Jääb kohale	Alguses kerib, siis jääb kohale

Näide:

.static-box {
  position: static; /* Vaikimisi asukoht */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Nihutamine ülespoole normaalsest asukohast */
  left: 20px; /* Nihutamine paremale normaalsest asukohast */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Vanem, mis positsioneerub */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Seotud konteinerile */
  left: 50px; /* Seotud konteinerile */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Vaatesse (viewport) suhtes */
  right: 10px; /* Vaatesse (viewport) suhtes */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Kleepub vaatesse (viewport) ülaossa */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Peetakse teiste elementide peal, kui kleebitud */
}

Milline on erinevus CSS-is elementide positsioneerimise erinevate meetodite vahel?