Series: CSS Basics Lesson 14

CSS Asoslari - 14-dars

z-index va stacking context tushunchalarini chuqur o'rganing. z-index qanday ishlaydi, nega ba'zida ishlamay qoladi va stacking context nima ekanligini tushuning.

14-dars

O'zing nomla

1. z-index nima?

z-index — qaysi element boshqasining USTIDA chiqishini belgilaydi.

Oddiy qilib aytganda:

"Qaysi element oldinda, qaysi biri orqada?"

Juda muhim

z-index FAQAT positioned elementlarda ishlaydi

Ya'ni:

  • position: relative
  • absolute
  • fixed
  • sticky

❌ position: static → z-index ishlamaydi

Oddiy misol

<div class="box red"></div>
<div class="box blue"></div>

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background: red;
  z-index: 1;
}

.blue {
  background: blue;
  z-index: 2;
}

👉 Blue tepada chiqadi, chunki z-index katta.

z-index qanday ishlaydi?

Brauzer bunday o'ylaydi 🧠:

1️⃣ Elementlar ustma-ust tushdimi? 2️⃣ Ikkalasi ham positionedmi? 3️⃣ z-indexni solishtiraman 4️⃣ Katta qiymat — tepada

2. Nega z-index ishlamay qoladi?

Eng muhim

z-index global emas. U faqat o'z stacking context'i ichida ishlaydi.

Agar shu jumlani tushunsang — z-index endi hech qachon "sirli" bo'lmaydi.

1️⃣ Stacking context nima o'zi?

Stacking context — bu o'zining alohida "layer dunyosi".

Brauzer shunday deydi:

"Bu konteyner ichida kim ustun, kim past — o'ZIM hal qilaman."

2️⃣ Qachon yangi stacking context yaratiladi?

Mana eng muhim trigger'lar 👇

✅ position + z-index

.parent {
  position: relative;
  z-index: 1;
}

👉 YANGI stacking context

✅ position: fixed

Har doim yangi context

✅ opacity < 1

.box {
  opacity: 0.9;
}

👉 Ko'pchilik bilmaydi — yangi context

✅ transform

.box {
  transform: translateZ(0);
}

👉 Yangi context (juda ko'p xatolar shu yerda)

✅ filter, perspective, will-change

Bular ham stacking context yaratadi

3️⃣ Klassik REAL XATO (hamma qilgan)

.card {
  position: relative;
  z-index: 1;
}

.modal {
  position: fixed;
  z-index: 9999;
}

Lekin .modal baribir pastda chiqyapti 😐

Nega?

Chunki .card ota elementda:

  • transform bor
  • yoki
  • opacity bor

👉 .modal ichkaridagi context'da qamalib qolgan

Qanday hal qilish?

1️⃣ Ota elementdan transform/opacity ni olib tashlash 2️⃣ Modalni to'g'ridan-to'g'ri body'ga qo'yish 3️⃣ Yoki ota elementga ham yuqori z-index berish

Eng ko'p uchraydigan xatolar ro'yxati

❌ Xato 1: position: static bilan z-index ishlatish

.box {
  position: static; /* ❌ */
  z-index: 999;
}

➡️ Ishlamaydi, chunki static positioned emas

❌ Xato 2: transform bilan yashirilgan stacking context

.parent {
  transform: scale(1); /* Ko'rinmaydi, lekin context yaratadi */
}

.child {
  z-index: 9999; /* Parent context'ida qamalgan */
}

➡️ Child parent context'idan chiqa olmaydi

❌ Xato 3: opacity bilan yashirilgan context

.container {
  opacity: 0.99; /* 1 dan kichik = yangi context */
}

.modal {
  z-index: 10000; /* Container context'ida */
}

➡️ Modal container ichida qoladi

❌ Xato 4: Nested z-index'lar noto'g'ri ishlatilgan

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: relative;
  z-index: 100; /* Parent context'ida 100 */
}

.sibling {
  position: relative;
  z-index: 2; /* Parent context'ida 2 */
}

➡️ Child z-index: 100 bo'lsa ham, u parent context'ida. Sibling esa parent context'ida 2. Lekin parent o'zi boshqa context'da 1 bo'lsa, child ham o'sha context'da qoladi.

Stacking context qanday ishlaydi? (detal)

Brauzer har bir stacking context'ni alohida "quti" sifatida ko'radi:

Root Context (z-index: auto)
├── Context A (z-index: 1)
│   ├── Element 1 (z-index: 10)
│   └── Element 2 (z-index: 5)
├── Context B (z-index: 2)
│   └── Element 3 (z-index: 1000)
└── Element 4 (z-index: 3)

Natija:

  • Element 4 eng tepada (root context'da 3)
  • Keyin Context B (root context'da 2)
  • Keyin Context A (root context'da 1)

Element 3 z-index: 1000 bo'lsa ham, u faqat Context B ichida yuqori. Context B o'zi root'da 2, shuning uchun Element 4 (3) tepada.

Praktik maslahatlar

✅ Maslahat 1: Modal va overlay uchun body'ga to'g'ridan-to'g'ri qo'ying

<body>
  <div class="content">...</div>
  <div class="modal">...</div> <!-- Body'ga to'g'ri -->
</body>

✅ Maslahat 2: transform ishlatayotganda ehtiyot bo'ling

Agar transform kerak bo'lsa, modalni ota elementdan tashqariga chiqaring.

✅ Maslahat 3: z-index'lar uchun naming convention

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

Bu tartibni saqlashga yordam beradi.

Xulosa

z-index ishlashi uchun:

  1. Element positioned bo'lishi kerak (relative, absolute, fixed, sticky)
  2. Stacking context'ni tushunish kerak
  3. transform, opacity, filter kabi xususiyatlar yangi context yaratishini bilish kerak
  4. Modal va overlay'lar uchun body'ga to'g'ridan-to'g'ri qo'yish yaxshiroq

Agar z-index ishlamasa — stacking context'ni tekshiring! 🔍