Jaka jest różnica między różnymi metodami…

static - Domyślne położenie. Element jest pozycjonowany zgodnie z normalnym przepływem dokumentu. Właściwości top, right, bottom, left nie mają wpływu.
relative - Element jest pozycjonowany względem swojej normalnej pozycji w przepływie. Właściwości top, right, bottom, left przesuwają element od jego pierwotnej pozycji, ale zajmowane przez niego miejsce w przepływie jest zachowane.
absolute - Element jest całkowicie usuwany z normalnego przepływu dokumentu. Jego pozycja jest określana przez właściwości top, right, bottom, left względem najbliższego pozycjonowanego przodka (z position: relative, absolute, fixed lub sticky). Jeśli takich przodków nie ma, pozycja jest określana względem początkowego bloku <html>.
fixed - Element jest całkowicie usuwany z normalnego przepływu dokumentu. Jego pozycja jest określana przez właściwości top, right, bottom, left względem okna widoku (viewport). Element pozostaje na miejscu podczas przewijania strony.
sticky - Element jest pozycjonowany jak relative, dopóki podczas przewijania nie osiągnie ustawionej pozycji (top, right, bottom, left), po czym jego pozycja staje się fixed.

Tabela różnic:

Właściwość	`static`	`relative`	`absolute`	`fixed`	`sticky`
Przepływ dokumentu	Zwykły	Zachowuje	Usuwa się	Usuwa się	Najpierw zwykły, potem usunięty
Przesunięcie (`top` itp.)	Nie	W stosunku do siebie	W stosunku do przodka/viewport	W stosunku do viewport	W stosunku do siebie, potem viewport
Przy przewijaniu	Przewija się	Przewija się	Pozostaje na miejscu (jeśli przodek `fixed`) lub przewija się z przodkiem	Pozostaje na miejscu	Najpierw przewija się, potem zostaje na miejscu

Przykład:

.static-box {
  position: static; /* Domyślne położenie */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Przesunięcie w dół od normalnej pozycji */
  left: 20px; /* Przesunięcie w prawo od normalnej pozycji */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

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

.absolute-box {
  position: absolute;
  top: 50px; /* W stosunku do kontenera */
  left: 50px; /* W stosunku do kontenera */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* W stosunku do okna widoku */
  right: 10px; /* W stosunku do okna widoku */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Przykleja się do górnej krawędzi viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Aby nałożyć się na inne elementy podczas przyklejania */
}

Jaka jest różnica między różnymi metodami pozycjonowania elementów w CSS?