Kuo skiriasi skirtingi elementų pozicionavimo būdai…

static - Numatytoji padėtis. Elementas pozicionuojamas pagal dokumento standartinį srautą. top, right, bottom, left savybės neveikia.
relative - Elementas pozicionuojamas santykinai pagal jo įprastą padėtį sraute. top, right, bottom, left savybės jį perkelia nuo pradinės pozicijos, tačiau užimta vieta sraute išlieka.
absolute - Elementas visiškai pašalinamas iš normalaus dokumento srauto. Jo padėtis nustatoma pagal top, right, bottom, left savybes artimiausio pozicionuoto tėvo atžvilgiu (su position: relative, absolute, fixed arba sticky). Jei tokių tėvų nėra, padėtis nustatoma pagal pradinį <html> bloką.
fixed - Elementas visiškai pašalinamas iš normalaus dokumento srauto. Jo padėtis nustatoma pagal top, right, bottom, left savybes atsižvelgiant į naršyklės langą (viewport). Elementas lieka vietoje naršant puslapį.
sticky - Elementas pozicionuojamas kaip relative, kol naršant jis nepasiekia nustatytos pozicijos (top, right, bottom, left), po to jo padėtis tampa fixed.

Skirtumų lentelė:

Savybė	`static`	`relative`	`absolute`	`fixed`	`sticky`
Dokumento srautas	Įprastas	Išlaiko	Pašalinama	Pašalinama	Pirmiausia įprastas, tada pašalinamas
Perkėlimas (`top` ir kt.)	Ne	Santykinai sau	Santykinai tėvo/viewport`	Santykinai viewport`	Santykinai sau, tada viewport`
Naršant puslapį	Naršo	Naršo	Lieka vietoje (jei tėvas `fixed`) arba juda kartu su tėvu	Lieka vietoje	Pirmiausia juda, tada lieka vietoje

Pavyzdys:

.static-box {
  position: static; /* Numatytoji padėtis */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Perkėlimas į viršų nuo įprastos padėties */
  left: 20px; /* Perkėlimas į dešinę nuo įprastos padėties */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Tėvas, kuris pozicionuojamas */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

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

.fixed-box {
  position: fixed;
  bottom: 10px; /* Santykinai naršyklės lango */
  right: 10px; /* Santykinai naršyklės lango */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Prilipo prie naršyklės lango viršaus */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Virš kitų elementų */
}

Kuo skiriasi skirtingi elementų pozicionavimo būdai CSS?