Jaký je rozdíl mezi různými způsoby umístění prvků v…

static - Výchozí poloha. Prvek je umístěn podle standardního toku dokumentu. Vlastnosti top, right, bottom, left neovlivňují.
relative - Prvek je umístěn relativně k jeho normální pozici v toku. Vlastnosti top, right, bottom, left posunou prvek od jeho původní pozice, ale místo, které zabírá v toku, zůstává.
absolute - Prvek je úplně odstraněn z normálního toku dokumentu. Jeho pozice je určena vlastnostmi top, right, bottom, left vzhledem k nejbližšímu pozicovanému rodiči (s position: relative, absolute, fixed nebo sticky). Pokud takoví rodiče nejsou, pozice je určena vzhledem k počátečnímu bloku <html>.
fixed - Prvek je úplně odstraněn z normálního toku dokumentu. Jeho pozice je určena vlastnostmi top, right, bottom, left vzhledem k oknu prohlížeče (viewport). Prvek zůstává na místě při posouvání stránky.
sticky - Prvek je pozicován jako relative, dokud při posouvání nedosáhne zadané pozice (určené top, right, bottom, left), poté se jeho pozice stává fixed.

Tabulka rozdílů:

Vlastnost	`static`	`relative`	`absolute`	`fixed`	`sticky`
Tok dokumentu	Obvyklý	Zachovává	Odstraňuje se	Odstraňuje se	Nejprve obvyklý, pak odstraňuje
Posun (`top` apod.)	Ne	Relativně k sobě	Relativně k rodiči/viewportu	Relativně k viewportu	Relativně k sobě, pak k viewportu
Při posouvání	Posouvá se	Posouvá se	Zůstává na místě (pokud rodič `fixed`) nebo se posouvá s rodičem	Zůstává na místě	Nejprve se posouvá, pak zůstává na místě

Příklad:

.static-box {
  position: static; /* Výchozí poloha */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Posun dolů od normální pozice */
  left: 20px; /* Posun doprava od normální pozice */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Pozicovaný rodič */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

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

.fixed-box {
  position: fixed;
  bottom: 10px; /* Vztah k viewportu */
  right: 10px; /* Vztah k viewportu */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Přilepí se k horní části viewportu */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Překrývá jiné prvky při přilepení */
}

Jaký je rozdíl mezi různými způsoby umístění prvků v CSS?