13-dars

O'zing nomla

1. position: absolute qayerga nisbatan joylashadi?

Eng muhim qoida

position: absolute eng yaqin position berilgan ota elementga nisbatan joylashadi

Agar bunday ota yo'q bo'lsa 👉 butun sahifaga (viewport) nisbatan.

Absolute nima qiladi?

position: absolute degani:

"Meni oddiy oqimdan chiqar, va qo'lda joylashtir"

Natijada:

• ❌ normal document flow'dan chiqadi
• ❌ joyi yo'qoladi (bo'sh joy qolmaydi)
• ✅ top / left / right / bottom ishlaydi

1️⃣ Ota BOR holat (to'g'ri variant)

<div class="card">
  <span class="badge">NEW</span>
</div>

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
}

👉 Bu yerda:

.badge .card ga nisbatan

yuqori o'ng burchakka joylashdi

2️⃣ Ota YO'Q holat (klassik xato)

.card {
  /* position yo'q */
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
}

👉 Natija:

.badge butun sahifaga nisbatan chiqadi

"nega navbar ustiga chiqib ketdi?" degan savol paydo bo'ladi

Engine ichida nima bo'ladi? 🧠

Brauzer algoritmi juda sodda:

1. absolute elementni ko'rdim
2. Yuqoriga qarab chiqaman
3. position ≠ static bo'lgan birinchi ota — TOPILDI ✅
4. Shu elementga nisbatan joylashtiraman
5. Agar topilmasa: 👉 viewport (html/body)

Nega absolute'ning joyi yo'qoladi?

Chunki u:

• normal flow'dan chiqadi
• brauzer unga joy ajratmaydi

<div class="box"></div>
<p>Matn</p>

.box {
  position: absolute;
}

👉 Natija:

• p yuqoriga ko'tariladi
• box ustma-ust chiqadi

Bu xato emas, bu absolute'ning tabiati.

Absolute qachon ishlatiladi?

✅ Badge, icon, label ✅ Modal ichidagi close tugma ✅ Card ichidagi overlay ✅ Tooltip, dropdown

❌ Katta sahifa layouti uchun ❌ Asosiy ustunlar uchun

2. position: fixed qanday ishlaydi?

Eng muhim qoida

position: fixed OTA QIDIRMAYDI LAYOUTGA QARAMAYDI VIEWPORTGA BOG'LANADI

Bu uchta gap — butun fixed'ning mohiyati.

fixed aslida nima?

position: fixed degani:

"Meni sahifaga emas, foydalanuvchi ekraniga mixlab qo'y"

Natijada:

• element normal flow'dan chiqadi
• scroll bilan harakatlanmaydi
• doim bir joyda turadi

Oddiy misol (klassik)

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

👉 Natija:

sahifa scroll bo'lsa ham

header tepada qotib turadi

Fixed nimaga nisbatan joylashadi?

👉 Viewport ga.

Ya'ni:

• brauzer oynasi
• telefon ekrani
• user ko'rayotgan qism

❗ relative ota ❌ ❗ absolute ota ❌ ❗ parent ❌

Fixed uchun faqat ekran bor.

Engine darajasida nima bo'ladi? 🧠

Brauzer shunday deydi:

"Bu element sahifaning bir qismi emas. Bu — interfeys elementi."

Shuning uchun:

• layout hisobidan chiqadi
• scroll hisobiga kirmaydi

3. position: sticky nima va nega ko'pincha ishlamaydi?

position: sticky nima o'zi?

sticky — bu relative + fixed aralashmasi.

Brauzer bunday o'ylaydi:

"Avval joyingda tur, lekin scroll kelganda — ma'lum joyga kelib qotib qol."

Sticky qanday ishlaydi? (bosqichma-bosqich 🧠)

1️⃣ Element oddiy oqimda turadi (relative kabi) 2️⃣ Scroll bo'ladi 3️⃣ Belgilangan nuqtaga keladi (top, bottom) 4️⃣ Shu joyda qotib qoladi (fixed kabi) 5️⃣ Ota konteyner tugasa — yana ketadi

ENG MUHIM QOIDA 🔒

sticky ishlashi uchun top yoki bottom SHART

❌ Buni qo'ymasang — hech qachon ishlamaydi

.bad {
  position: sticky;
}

❌ Ishlamaydi

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

✅ Ishlaydi

Ikkinchi MUHIM shart ⚠️

Sticky ota konteynerdan chiqib keta olmaydi

Ya'ni:

• sticky butun sahifa uchun emas
• ota element chegarasi ichida

Agar ota kichik bo'lsa → sticky tez o'chadi

Eng ko'p uchraydigan 5 ta sabab (nega ishlamaydi)

❌ 1. top yo'q

➡️ 80% muammo shu

❌ 2. Ota elementda overflow: hidden / auto / scroll

.parent {
  overflow: hidden;
}

👉 Sticky o'chadi Sabab: scroll kontekst o'zgargan

❌ 3. Ota elementning balandligi yetarli emas

Sticky ishlashi uchun:

• scroll bo'lishi kerak
• joy bo'lishi kerak

❌ 4. display: flex ichida noto'g'ri ishlatilgan

Ba'zi flex holatlarda sticky ishlamaydi (ayniqsa align-items: stretch bilan)

❌ 5. Browser support / kutilmagan context

Eski browserlar yoki murakkab nesting

📊 POSITION VALUE'LAR TAQQOSLASH JADVALI (ENG MUHIM QISM)

Position	Oqimda qoladimi	Joy egallaydimi	Nisbatan joylashadi	Scroll ta'siri	Qachon ishlatiladi
static	✅	✅	Hech qayerga	Scroll bilan yuradi	Default holat
relative	✅	✅	O'ziga nisbatan	Scroll bilan yuradi	Absolute uchun ota
absolute	❌	❌	Eng yaqin position'li ota	Scroll bilan yuradi	Badge, overlay
fixed	❌	❌	Viewport	❌ Qimirlamaydi	Header, floating UI
sticky	✅ (boshlanishida)	✅	Ota + viewport	Shartli qotadi	Section header