Каква е разликата между различните начини за…

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; /* За припокриване на други елементи при залепване */
}

Каква е разликата между различните начини за позициониране на елементите в CSS?