Wat is het verschil tussen de verschillende manieren…

static - Standaardpositie. Het element wordt gepositioneerd volgens de normale stroom van het document. De eigenschappen top, right, bottom, left hebben geen effect.
relative - Het element wordt gepositioneerd ten opzichte van zijn normale positie in de stroom. De eigenschappen top, right, bottom, left verschuiven het element vanaf zijn oorspronkelijke positie, maar de ruimte die het inneemt in de stroom blijft behouden.
absolute - Het element wordt volledig verwijderd uit de normale stroom van het document. De positie wordt bepaald door de eigenschappen top, right, bottom, left ten opzichte van de dichtstbijzijnde gepositioneerde voorouder (met position: relative, absolute, fixed of sticky). Als er geen dergelijke voorouders zijn, wordt de positie bepaald ten opzichte van de initiële <html>-blok.
fixed - Het element wordt volledig verwijderd uit de normale stroom van het document. De positie wordt bepaald door de eigenschappen top, right, bottom, left ten opzichte van het venster (viewport). Het element blijft op zijn plaats bij het scrollen van de pagina.
sticky - Het element wordt gepositioneerd als relative totdat het de ingestelde positie bereikt tijdens het scrollen (top, right, bottom, left), waarna de positie fixed wordt.

Tabel van verschillen:

Eigenschap	`static`	`relative`	`absolute`	`fixed`	`sticky`
Documentstroom	Normaal	Behoudt	Wordt verwijderd	Wordt verwijderd	Eerst normaal, dan verwijderd
Verschuiving (`top` etc.)	Nee	Ten opzichte van zichzelf	Ten opzichte van voorouder/viewport	Ten opzichte van viewport	Ten opzichte van zichzelf, daarna viewport
Bij scrollen	Scrollt	Scrollt	Blijft op zijn plek (als voorouder `fixed`) of scrollt mee met voorouder	Blijft op zijn plek	Eerst scrollen, daarna blijft op plek

Voorbeeld:

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

.relative-box {
  position: relative;
  top: 20px; /* Verplaatsing naar beneden vanaf normale positie */
  left: 20px; /* Verplaatsing naar rechts vanaf normale positie */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Gepositioneerde voorouder */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Ten opzichte van container */
  left: 50px; /* Ten opzichte van container */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Ten opzichte van viewport */
  right: 10px; /* Ten opzichte van viewport */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Plakt aan de bovenkant van viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Voor overlappen bij plakken */
}

Wat is het verschil tussen de verschillende manieren van positionering van elementen in CSS?