Mi a különbség a különböző elemek pozícionálási…

static - Alapértelmezett helyzet. Az elem a dokumentum normál áramlásának megfelelően pozícionálódik. A top, right, bottom, left tulajdonságok nem befolyásolják.
relative - Az elem a normál helyzetéhez képest pozícionálódik. A top, right, bottom, left tulajdonságok eltolják az elemet az eredeti pozíciójától, de a hely, amit elfoglal a folyamatban, megmarad.
absolute - Az elem teljesen eltávolodik a dokumentum normál áramlásából. Pozícióját a top, right, bottom, left tulajdonságok határozzák meg a legközelebbi pozícionált szülőhöz képest (akinek position: relative, absolute, fixed vagy sticky). Ha nincs ilyen szülő, akkor az alapértelmezett blokkhoz <html> viszonyítva van.
fixed - Az elem teljesen eltávolodik a dokumentum normál áramlásából. Pozícióját a top, right, bottom, left tulajdonságok határozzák meg a nézetablak (viewport) viszonyításában. Az elem a helyén marad görgetés közben.
sticky - Az elem relative-ként pozícionálódik, amíg görgetés közben el nem éri a megadott pozíciót (amelyet a top, right, bottom, left határoz meg), ezután fixed-ként viselkedik.

Különbségtáblázat:

Tulajdonság	`static`	`relative`	`absolute`	`fixed`	`sticky`
Dokumentum áramlás	Szokásos	Megmarad	El van távolítva	El van távolítva	Először szokásos, majd el van távolítva
Eltolás (`top` stb.)	Nem	Önmagához képest	Szülőhöz/viewport-hoz képest	Viewport-hoz képest	Önmagához, majd viewport-hoz képest
Görgetés közben	Görgetődik	Görgetődik	Marad a helyén (ha a szülő `fixed`) vagy görgetődik a szülővel	Marad a helyén	Először görgetődik, majd marad a helyén

Példa:

.static-box {
  position: static; /* Alapértelmezett helyzet */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Eltolás lefelé a normál helyzethez képest */
  left: 20px; /* Eltolás jobbra a normál helyzethez képest */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Pozícionált szülő */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* A konténerhez képest */
  left: 50px; /* A konténerhez képest */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* A viewport-hoz képest */
  right: 10px; /* A viewport-hoz képest */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Ragaszkodik a viewport tetejéhez */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* A többi elem fölé kerül, amikor ragad */
}

Mi a különbség a különböző elemek pozícionálási módjai között a CSS-ben?