Koja je razlika između različitih načina…

static - Положај по подразумевану. Елемент се позиционира према стандардном току документа. Свјетлости top, right, bottom, left не утичу.
relative - Елемент се позиционира релативно у односу на његову нормалну позицију у току. Свјетлости top, right, bottom, left помјерају елемент од његове почетне позиције, али заузето мјесто у току остаје.
absolute - Елемент се потпуно уклања из нормалног тока документа. Његова позиција се одређује својствима top, right, bottom, left у односу на најближи позиционирани родитељ (са position: relative, absolute, fixed или sticky). Ако такви родитељи не постоје, позиција се одређује у односу на почетни блок <html>.
fixed - Елемент се потпуно уклања из нормалног тока документа. Његова позиција се одређује својствима top, right, bottom, left у односу на прозор прегледача (viewport). Елемент остаје на мјесту при скроловању странице.
sticky - Елемент се позиционира као relative док при скроловању не достигне задату позицију (одређује се top, right, bottom, left), након чега његова позиција постаје fixed.

Табела разлика:

Свјетлост	`static`	`relative`	`absolute`	`fixed`	`sticky`
Ток документа	Обичан	Задржава	Уклања се	Уклања се	Прво обичан, затим уклоњен
Помјерање (`top` итд.)	Не	Отпоран на себе	Отпоран на родитеља/viewport	Отпоран на viewport	Отпоран на себе, затим viewport
При скроловању	Скролује се	Скролује се	Остаје на мјесту (ако родитељ `fixed`) или се скролује са родитељем	Остаје на мјесту	Прво се скролује, затим остаје на мјесту

Пример:

.static-box {
  position: static; /* Положај по подразумевану */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Помјерање надоле од нормалног положаја */
  left: 20px; /* Помјерање удесно од нормалног положаја */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Позиционирани родитељ */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* У односу на контејнер */
  left: 50px; /* У односу на контејнер */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* У односу на viewport */
  right: 10px; /* У односу на viewport */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Лепи се за врх viewport-а */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* За преклапање других елемената приликом лепљења */
}

Koja je razlika između različitih načina pozicioniranja elemenata u CSS?