Aký je rozdiel medzi rôznymi spôsobmi umiestňovania…

static - Predvolené umiestnenie. Prvok je umiestnený podľa štandardného toku dokumentu. Vlastnosti top, right, bottom, left neovplyvňujú.
relative - Prvok je umiestnený relatívne k jeho normálnej polohe v toku. Vlastnosti top, right, bottom, left ho posunú od jeho pôvodnej pozície, ale miesto, ktoré zaberá v toku, zostáva.
absolute - Prvok je úplne odstránený z normálneho toku dokumentu. Jeho pozícia je určená vlastnosťami top, right, bottom, left vzhľadom na najbližšieho pozicovaného rodiča (s position: relative, absolute, fixed alebo sticky). Ak takí rodičia nie sú, pozícia je určená vzhľadom na počiatočný blok <html>.
fixed - Prvok je úplne odstránený z normálneho toku dokumentu. Jeho pozícia je určená vlastnosťami top, right, bottom, left vzhľadom na okno prehliadača (viewport). Prvok zostáva na mieste pri posúvaní stránky.
sticky - Prvok je pozicovaný ako relative, kým pri posúvaní nedosiahne zadanú pozíciu (určenú top, right, bottom, left), po ktorej sa jeho pozícia stáva fixed.

Tabuľka rozdielov:

Vlastnosť	`static`	`relative`	`absolute`	`fixed`	`sticky`
Tok dokumentu	Obvyklý	Zachováva	Odstraňuje sa	Odstraňuje sa	Najprv obvyklý, potom odstránený
Posun (`top` a pod.)	Nie	Relatívne k sebe	Relatívne k rodičovi/viewportu	Relatívne k viewportu	Relatívne k sebe, potom k viewportu
Pri posúvaní	Posúva sa	Posúva sa	Zostáva na mieste (ak rodič `fixed`) alebo sa posúva s rodičom	Zostáva na mieste	Najprv sa posúva, potom zostáva na mieste

Príklad:

.static-box {
  position: static; /* Poloha podľa predvolenej hodnoty */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Posun nadol od normálnej pozície */
  left: 20px; /* Posun doprava od normálnej pozície */
  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; /* Voči kontajneru */
  left: 50px; /* Voči kontajneru */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

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

.sticky-header {
  position: sticky;
  top: 0; /* Prilepí sa k hornej časti viewportu */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Prekrýva iné prvky pri prilepení */
}

Aký je rozdiel medzi rôznymi spôsobmi umiestňovania prvkov v CSS?