CSSте элементтерди жайгаштыруу үчүн ар кандай…

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` ж.б.)	Жок	өзү боюнча салыштырмалуу	ата-элементке/көрүү терезесине карата салыштырмалуу	көрүү терезесине карата салыштырмалуу	өзү боюнча, андан кийин көрүү терезесине карата
Скроллдоодо	Скроллдойт	Скроллдойт	ордуна калат (эгер ата-элемент `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; /* Көрүү терезесине карата */
  right: 10px; /* Көрүү терезесине карата */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Көрүү терезесинин жогорку жагына жабышат */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Башка элементтердин үстүнө чыгуу үчүн */
}

CSSте элементтерди жайгаштыруу үчүн ар кандай ыкмаларынын айырмасы эмнеде?