CSS'dagi position qiymatlari bir-biridan nimasi bilan farq qiladi?

JuniorCSS #css #positioning

Savol

static, relative, absolute, fixed va sticky bir-biridan nimasi bilan farq qiladi?

Qisqa javob

position element hujjat oqimida qanday ishtirok etishini va top/left/right/bottom nimaga nisbatan hisoblanishini belgilaydi.

Batafsil javob

static (standart) — element odatiy oqimda, top/left ta'sir qilmaydi.
relative — oqimda qoladi, lekin top/left orqali o'zining boshlang'ich pozitsiyasiga nisbatan siljishi mumkin. Shuningdek absolutega ega farzandlar uchun koordinatalar tizimini yaratadi.
absolute — oqimdan chiqadi, positioni staticdan farqli bo'lgan eng yaqin ajdodga (yoki bunday bo'lmasa <html>ga) nisbatan joylashadi.
fixed — oqimdan chiqadi, ko'rish oynasi (viewport)ga nisbatan joylashadi va skroll paytida siljimaydi.
sticky — relative va fixedning gibridi: belgilangan chegaraga (top: 0) yetguncha relative kabi xatti-harakat qiladi, keyin esa ota doirasida fixed kabi "yopishib qoladi".

Misol

.dropdown {
  position: relative; /* menyu uchun langar */
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
}

.header {
  position: sticky;
  top: 0;
}

Qo'shimcha savollar

Nega sticky ba'zan "ishlamaydi"?
Stacking context (qatlamlanish konteksti) nima va position unga qanday ta'sir qiladi?
position: absolute z-index bilan qanday o'zaro ta'sirlashadi?