CSSda elementlarni joylashning turli usullari…

static - Standart pozitsiya. Element hujjat oqimiga muvofiq joylashadi. top, right, bottom, left xususiyatlari ta'sir qilmaydi.
relative - Element o'zining normal joylashuvi bilan nisbatan joylashadi. top, right, bottom, left xususiyatlari elementni uning asl pozitsiyasidan siljitadi, ammo uning egallagan joyi oqimda saqlanadi.
absolute - Element to'liq ravishda hujjat oqimidan chiqariladi. Uning joylashuvi top, right, bottom, left xususiyatlari bilan eng yaqin joylashgan avlodga (position: relative, absolute, fixed yoki sticky) nisbatan belgilanadi. Agar bunday avlodlar bo'lmasa, joylashuvi <html> boshlang'ich blokiga nisbatan belgilanadi.
fixed - Element to'liq ravishda hujjat oqimidan chiqariladi. Uning joylashuvi top, right, bottom, left xususiyatlari bilan ko'rish oynasiga (viewport) nisbatan belgilanadi. Element sahifa skroll qilinayotganda joyida qoladi.
sticky - Element relative kabi joylashadi, skroll qilish davomida belgilangan pozitsiyaga (top, right, bottom, left) yetgach, uning joylashuvi fixed bo'ladi.

Farqlash jadvali:

Xususiyat	`static`	`relative`	`absolute`	`fixed`	`sticky`
Hujjat oqimi	Oddiy	Saqlaydi	O'chiriladi	O'chiriladi	Avval oddiy, keyin o'chiriladi
Siljish (`top` va boshqalar)	Yo'q	O'ziga nisbatan	Avrora/viewportga nisbatan	Viewportga nisbatan	O'ziga, keyin viewportga nisbatan
Skroll qilishda	Skroll qilinadi	Skroll qilinadi	Joyida qoladi (agar avlod `fixed` bo'lsa) yoki avlod bilan skroll qilinadi	Joyida qoladi	Avval skroll qilinadi, keyin joyida qoladi

Misol:

.static-box {
  position: static; /* Standart joylashuv */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Oddiy joylashuvdan pastga siljish */
  left: 20px; /* Oddiy joylashuvdan o'ngga siljish */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

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

.absolute-box {
  position: absolute;
  top: 50px; /* Kontentga nisbatan */
  left: 50px; /* Kontentga nisbatan */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Ko'rish oynasiga nisbatan */
  right: 10px; /* Ko'rish oynasiga nisbatan */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Ko'rish oynasining yuqori qismiga yopishadi */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Boshqa elementlar ustidan turish uchun */
}

CSSda elementlarni joylashning turli usullari orasidagi farq nima?