Chapter 11 — Relative, Absolute, Sticky

---

11.1 Position Klasslari

Mental Model

🧠 relative — "xona" (langar). absolute bola element — devorga osilgan rasm: xona qayerda bo'lsa, rasm o'sha yerga nisbatan joylashadi.

Example

index.html
HTMLNusxalash
01<div class="relative w-40">
02  <img src="product.jpg" class="w-full rounded-lg">
03  <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">Yangi</span>
04</div>

11.2 Sticky va z-index

Example

index.html
HTMLNusxalash
01<header class="sticky top-0 z-50 bg-white shadow p-4">Header</header>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Rasm ustiga absolute top-2 right-2 bilan badge qo'shing.

🟡 Exercise 2 — Medium

Task: sticky top-0 z-50 bilan header yarating va sahifani scroll qilib tekshiring.

🔴 Exercise 3 — Hard

Task: To'liq ishlaydigan dropdown menu yarating (relative + absolute + hover/click state).

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div>
02  <img src="...">
03  <span class="absolute top-0 right-0">Badge</span>
04</div>

Your Task: Nega badge rasm burchagida emas, sahifaning yuqori-o'ng burchagida chiqadi?

<details> <summary>Solution</summary> Ota `<div>`da `relative` yo'q. Yechim: ota `<div>`ga `relative` qo'shish, shunda `absolute` badge shu konteynerga nisbatan joylashadi. </details>

---

📌 Chapter Summary

relative — langar, absolute — shu langarga nisbatan erkin joylashuv. sticky top-0 — scroll paytida yopishib qoladigan header/navbar uchun.

🎯 Key Takeaways

• "relative (ota) + absolute (bola)" — badge, dropdown, tooltip, modal uchun asosiy naqsh
• z-index faqat position berilgan elementlarda ishlaydi
• sticky — relative va fixed orasidagi hibrid holat

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Pozitsiya: static, relative, absolute, fixed, sticky
02Koordinata: top-*, right-*, bottom-*, left-*, inset-*
03Naqsh:     relative (ota) + absolute (bola)

---