Chapter 8 — Position Xususiyati

---

8.1 Position Turlari

Example

styles.css
CSSNusxalash
01.relative { position: relative; top: 10px; left: 10px; } /* O'z o'rnidan siljiydi, joyi saqlanadi */
02.absolute { position: absolute; top: 0; right: 0; }      /* Eng yaqin positioned ota-elementga nisbatan */
03.fixed { position: fixed; bottom: 0; }                   /* Viewport'ga nisbatan, scroll bilan qotib qoladi */
04.sticky { position: sticky; top: 0; }                    /* Scrollgacha oddiy, keyin yopishadi */

8.2 z-index va Sticky

Example

styles.css
CSSNusxalash
01.header { position: sticky; top: 0; z-index: 100; }

⚠️ Common Mistake
z-indexni position berilmagan (static) elementga qo'llash — hech qanday ta'sir qilmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: position: relative bilan elementni 20px pastga va 20px o'ngga siljiting, uning asl joyi saqlanganini DevTools'da tekshiring.

🟡 Exercise 2 — Medium

Task: Rasm ustiga position: absolute bilan badge (nishoncha) qo'shing, ota elementga relative bering.

🔴 Exercise 3 — Hard

Task: To'liq ishlaydigan sticky header yarating, z-index bilan uni boshqa kontent ustida qoldiring.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.parent { }
02.child { position: absolute; top: 0; right: 0; }

Your Task: .child (badge) nega ota elementi burchagida emas, sahifaning yuqori-o'ng burchagida chiqmoqda?

<details> <summary>Solution</summary> `.parent`da `position` berilmagan (default `static`). Yechim: `.parent { position: relative; }` qo'shish, shunda `.child` shu konteynerga nisbatan joylashadi. </details>

---

📌 Chapter Summary

relative — o'z o'rnidan siljiydi, joyi saqlanadi. absolute — eng yaqin positioned ota-elementga nisbatan. fixed — viewport'ga qotadi. sticky — scrollgacha oddiy, keyin yopishadi. z-index faqat positioned elementlarda ishlaydi.

🎯 Key Takeaways

• "relative (ota) + absolute (bola)" — eng ko'p ishlatiladigan naqsh
• z-index uchun position shart
• sticky — relative va fixed orasidagi hibrid holat

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01position: static | relative | absolute | fixed | sticky;
02top/right/bottom/left: <value>;
03z-index: <number>; /* faqat positioned elementlarda */

---