Was ist der Unterschied zwischen den verschiedenen…

static - Standardposition. Das Element wird entsprechend dem normalen Dokumentenfluss positioniert. Die Eigenschaften top, right, bottom, left haben keinen Einfluss.
relative - Das Element wird relativ zu seiner normalen Position im Fluss positioniert. Die Eigenschaften top, right, bottom, left verschieben das Element von seiner ursprünglichen Position, aber der belegte Platz im Fluss bleibt erhalten.
absolute - Das Element wird vollständig aus dem normalen Dokumentenfluss entfernt. Seine Position wird durch die Eigenschaften top, right, bottom, left relativ zum nächsten positionierten Vorfahren (mit position: relative, absolute, fixed oder sticky) bestimmt. Falls keine solchen Vorfahren vorhanden sind, wird die Position relativ zum initialen Block <html> festgelegt.
fixed - Das Element wird vollständig aus dem normalen Dokumentenfluss entfernt. Seine Position wird durch die Eigenschaften top, right, bottom, left relativ zum Viewport bestimmt. Das Element bleibt an Ort und Stelle beim Scrollen der Seite.
sticky - Das Element wird wie relative positioniert, bis es beim Scrollen die festgelegte Position (definiert durch top, right, bottom, left) erreicht, ab dann wird seine Position fixed.

Unterschiedstabelle:

Eigenschaft	`static`	`relative`	`absolute`	`fixed`	`sticky`
Dokumentenfluss	Normal	Bleibt	Wird entfernt	Wird entfernt	Zuerst normal, dann entfernt
Verschiebung (`top` etc.)	Nein	Relativ zu sich selbst	Relativ zum Vorfahren/Viewport	Relativ zum Viewport	Relativ zu sich selbst, dann Viewport
Beim Scrollen	Scrollt	Scrollt	Bleibt an Ort und Stelle (wenn Vorfahre `fixed`) oder scrollt mit Vorfahre	Bleibt an Ort und Stelle	Zuerst scrollt, dann bleibt an Ort

Beispiel:

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

.relative-box {
  position: relative;
  top: 20px; /* Verschiebung nach unten von der normalen Position */
  left: 20px; /* Verschiebung nach rechts von der normalen Position */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

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

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

.fixed-box {
  position: fixed;
  bottom: 10px; /* Relativ zum Viewport */
  right: 10px; /* Relativ zum Viewport */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Haftet am oberen Rand des Viewports */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Für Überlagerung bei Anheftung */
}

Was ist der Unterschied zwischen den verschiedenen Methoden der Positionierung von Elementen in CSS?