CSS z-index va stacking context: nega 9999 ham yordam bermaydi

Qisqacha: z-index positsiyalangan elementga ishlaydi va faqat bitta stacking context ichida solishtiriladi. Stacking context — ichidagi hamma narsa bitta qatlam bo'lib chiziladigan guruh; uni position + z-index, opacity < 1, transform, isolation: isolate va boshqalar yaratadi. Shuning uchun otasi z-index: 1 li guruh bo'lsa, z-index: 9999 li element ham z-index: 2 li qo'shni ostida qoladi.

Bu darsda

• z-index siz ham elementlar qaysi tartibda chizilishini tushuntirasiz.
• Stacking context nima va uni nima yaratishini bilasiz.
• "9999 qo'ydim, baribir ostida" muammosini DevTools'da topib, tuzatasiz.
• isolation: isolate bilan komponentni tashqi dunyodan ajratasiz.
• Loyihada z-index qiymatlarini o'zgaruvchilar shkalasida saqlaysiz va top layer'ni qachon tanlashni bilasiz.

Oldin bilishingiz kerak: position: relative va absolute, fixed va sticky, Normal oqim, CSS o'zgaruvchilari, Popover API.

1. Nega bu kerak?

O'tgan ikki darsda uchta savol ochiq qoldi:

• position darsida skip link fokusda sarlavha ustida chiqdi. Lekin sarlavha yopishqoq bo'lsa-chi — kim ustda bo'ladi?
• fixed va sticky darsida jadvalning "Dushanba" katagi pastga surganda "Kun" katagi ustiga chiqib qoldi.
• position darsidagi tugadi kartasida "Tugadi" muhri nega pardadan ustda edi?

Dasturchilar forumlaridagi eng mashhur CSS savollaridan biri: "z-index: 9999 qo'ydim, element baribir boshqasining ostida!". Keyin 99999, keyin 999999 yoziladi — va hech narsa o'zgarmaydi. Bu darsdan keyin sababini birinchi qarashda topasiz.

2. z-index siz: qatlamlash tartibi

2.1 Qoida — pastdan tepaga

Elementlar ustma-ust tushganda brauzer ularni qat'iy tartibda chizadi. Oldin chizilgan ostda qoladi, keyin chizilgan — ustda. Soddalashtirilgan tartib, pastdan tepaga:

1. Kontekst ildizining foni va chegarasi (sahifada — html).
2. Manfiy z-index li positsiyalangan elementlar.
3. Oddiy (positsiyalanmagan) bloklarning foni va chegarasi.
4. Float'lar.
5. Matn va satr ichidagi elementlar.
6. Positsiyalangan elementlar (z-index: auto yoki 0) — HTML tartibida.
7. Musbat z-index li elementlar — kichigidan kattasiga.

Bu qatlamlash tartibi (painting order). Asosiy xulosa bitta: positsiyalangan element oddiy elementlardan ustda chiziladi, HTML'da oldin kelsa ham.

<style>
  .taom-karta {
    width: 12rem;
    padding: 4px 12px;
    border: 2px solid #2f6b3a;
    background-color: #fffaf0;
  }
  .taom-karta + .taom-karta {
    margin: -3rem 0 0 4rem;
    background-color: #d8ecd9;
  }
  .birinchi {
    position: relative;
  }
</style>
<article class="taom-karta birinchi">
  <h3>Osh</h3>
  <p>position: relative</p>
</article>
<article class="taom-karta">
  <h3>Manti</h3>
  <p>oddiy, lekin keyin</p>
</article>

Nimaga qarang: "Manti" kartasi manfiy margin bilan tepaga tortildi va "Osh" ga tegdi. HTML'da u keyin keladi, lekin ostida qoldi — "Osh" kartasi to'liq ko'rinadi. "Osh" — positsiyalangan (6-qadam), "Manti" — oddiy blok (3 va 5-qadamlar). Chrome'da tekshirdik: ikki karta kesishgan joyda nuqtani bosganda "Osh" kartasi tanlanadi. birinchi — faqat shu misol uchun nom.

2.2 Bir xil darajada — HTML tartibi

Ikki element bir xil qadamda bo'lsa (ikkalasi ham positsiyalangan, z-index yo'q), HTML'da keyin kelgani ustda. position darsidagi tugadi kartasining muhri shuning uchun pardadan ustda edi: ikkalasi ham absolute, ::after esa ::before dan keyin keladi.

fixed va sticky darsidagi jadval ham shu: thead th va tbody th ikkalasi ham sticky, ya'ni positsiyalangan. "Dushanba" HTML'da "Kun" dan keyin — u ustda chiziladi.

Tekshirib ko'ring: Rasmga float: left berildi, uning ustiga manfiy margin bilan oddiy paragraf tortildi. Rasm ustidami yoki paragraf matnimi?

3. z-index

3.1 Qatlam raqami

z-index — element qatlamining raqami: katta raqam ustda. Nomi ekranning uchinchi o'qidan: x — gorizontal, y — vertikal, z — ekrandan ko'zingizga qarab. Qiymatlari: auto (odatiy), butun son — musbat, nol yoki manfiy.

Ikki qoida:

• z-index positsiyalangan elementga ishlaydi. static elementga z-index: 10 yozsangiz, hech narsa o'zgarmaydi. Chrome'da tekshirdik: DevTools Computed'da qiymat 10 ko'rinadi, lekin element qatlami joyidan qimirlamadi. Istisno — flex va grid bolalari: ularga position siz ham ishlaydi (Flexbox'ga kirish).
• Manfiy z-index elementni oddiy bloklarning ham ostiga tushiradi (2-qadam). Buni isolation bo'limida ishlatamiz.

"Dushanba" va "Kun" jadvalini tuzatamiz. Sarlavha qatori tanadagi kataklardan ustda bo'lishi kerak:

thead th {
  z-index: 1;
}

Endi "Kun" (z-index: 1) "Dushanba" (auto) dan ustda: 7-qadam 6-qadamdan keyin chiziladi.

3.2 z-index: 0 va auto — bir xil emas

Ko'rinishda ular bir xil qatlamda (6-qadam). Lekin z-index: 0 — son. Positsiyalangan elementga son berilsa, u yangi stacking context (qatlamlar guruhi — keyingi bo'limda ochamiz) yaratadi. auto esa yaratmaydi. Bu farq darsning qolgan qismini tushunishning kaliti.

4. Stacking context

4.1 Papka o'xshatishi

Qatlamlar guruhi (stacking context) — ichidagi elementlar faqat o'zaro saralanadigan, tashqariga esa bitta yaxlit qatlam bo'lib chiqadigan guruh. Kursda uni inglizcha nomi bilan — "stacking context" yoki qisqa "kontekst" deb ataymiz.

Ikki kitobni ustma-ust qo'ying. Pastdagi kitobning 999-sahifasi ham ustdagi kitobning 1-sahifasidan yuqoriga chiqolmaydi. Sahifa raqami faqat o'z kitobi ichida ma'noga ega. Stacking context — kitob, z-index — sahifa raqami.

Brauzer shunday ishlaydi: avval har kontekst ichidagi elementlarni saralab chizadi. Keyin kontekstni yaxlit bir qatlam sifatida otasining kontekstiga qo'yadi — va u yerda u o'z z-index i bilan solishtiriladi.

4.2 "9999 baribir ostida"

«Bahor» sarlavhasida ochiladigan menyu bor. Stajyor uni z-index: 9999 bilan yozdi, lekin u aksiya tasmasi ostida qolib ketdi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  header {
    position: relative;
    z-index: 1;
    padding: 0.5rem 1rem;
    background-color: var(--rang-fon);
  }
  header ul {
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 1rem;
    margin: 0;
    padding: 0.5rem 1rem;
    list-style: none;
    background-color: var(--rang-asosiy);
  }
  header ul a {
    color: var(--rang-fon);
  }
  .aksiya {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 1rem;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
</style>
<header>
  <strong>Choyxona «Bahor»</strong>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="menyu/">Issiq taomlar</a></li>
      <li><a href="menyu/">Ichimliklar</a></li>
      <li><a href="menyu/">Shirinliklar</a></li>
    </ul>
  </nav>
</header>
<p class="aksiya">Aksiya! Bugun ko'k choy — 5 000 so'm.</p>

Nimaga qarang: yashil menyuning faqat pastki qismi — "Shirinliklar" tasma ostidan chiqib turibdi. "Issiq taomlar" va "Ichimliklar" qizg'ish aksiya tasmasi ostida qoldi. Menyuda 9999, tasmada 2 — lekin tasma ustda. Chrome'da tekshirdik: "Ichimliklar" havolasi turgan joyga bosganda aksiya paragrafi tanlanadi, havola emas. header ul — faqat namoyish uchun doim ochiq; haqiqiy ochiladigan menyuni Navbar darsida quramiz.

Kontekstlar daraxti:

flowchart TD
  R["html — ildiz kontekst"] --> H["header<br/>z-index: 1<br/>(kontekst)"]
  R --> A[".aksiya<br/>z-index: 2"]
  H --> U["header ul<br/>z-index: 9999"]

Nimaga qarang: 9999 faqat header kitobi ichida sahifa raqami. Ildiz darajasida header (1) va .aksiya (2) solishtiriladi — 2 katta. header va uning ichidagi hamma narsa, 9999 bilan birga, tasma ostida chiziladi.

4.3 Uchta tuzatish

Yuqoridan boshlab o'qing: ildiz darajasida kim kim bilan solishtirilyapti?

• Sarlavhani ko'tarish: header { z-index: 3; } — endi ildizda 3 > 2.
• Tasmani tushirish: .aksiya dan z-index ni olib tashlash. Unga bu yerda umuman kerak emas edi.
• Sarlavhadan kontekstni olib tashlash: header dan z-index ni o'chirish. Unda menyu to'g'ridan-to'g'ri ildiz kontekstida 9999 bilan qatnashadi.

Uchalasi ham ishlaydi. To'g'risi — qaysi element qaysi qatlamda yashashi kerakligi haqida qaror qabul qilish. Buni z-index shkalasi hal qiladi — pastroqda ko'ramiz. 9999 ni 99999 ga almashtirish esa hech qachon hal qilmaydi.

4.4 Kontekstni nima yaratadi

Ro'yxat uzun, va unda "yashirin" yaratuvchilar bor — z-index umuman yozilmagan joyda ham kontekst paydo bo'ladi:

Eng xavflilari — opacity va transform. Masalan, karta sichqoncha ustiga kelganda opacity: 0.9 bo'ladi — va shu paytda uning ichidagi tooltip qo'shni kartaning ostiga tushib qoladi. Karta ichida z-index: 9999 bo'lsa ham.

4.5 DevTools'da kontekstni topish

Muammoli elementni DevTools Elements panelida tanlang va yuqoriga — ajdodlar bo'ylab — chiqing. Har ajdodda Computed bo'limida z-index, position, opacity, transform, filter ni tekshiring. Birinchi kontekst yaratuvchi topilgach, savol beriladi: "Shu ajdod qo'shnisi bilan qanday solishtirilyapti?".

Chrome'da yana ikki yordamchi bor: Layers paneli sahifa qatlamlarini 3D ko'rinishda aylantirib ko'rsatadi. Microsoft Edge'dagi 3D View paneli esa z-index qatlamlarini alohida rejimda ko'rsatadi.

Tekshirib ko'ring: Karta opacity: 0.95, ichida tooltip position: absolute; z-index: 100. Qo'shni karta position: relative (z-index yo'q). Tooltip qo'shni karta ustiga chiqadimi?

5. isolation: isolate

5.1 Manfiy z-index yo'qolib qoldi

Kartaning o'ng yuqori burchagiga matn ostida turadigan och yashil bezak qo'ymoqchimiz. Bezak — ::before, matn ostida bo'lishi uchun z-index: -1:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    position: relative;
    width: 14rem;
    margin-bottom: 1rem;
    padding: 4px 12px;
    border: 2px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
  .taom-karta::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 5rem;
    height: 5rem;
    border-bottom-left-radius: 100%;
    background-color: #b9dcbd;
  }
  .taom-karta + .taom-karta {
    isolation: isolate;
  }
</style>
<article class="taom-karta">
  <h3>Osh — oddiy karta</h3>
  <p>Bezak karta foni ostida qoldi.</p>
</article>
<article class="taom-karta">
  <h3>Manti — isolation bilan</h3>
  <p>Bezak fon va matn orasida.</p>
</article>

Nimaga qarang: birinchi kartada bezak umuman ko'rinmaydi. Ikkinchisida — o'ng yuqori burchakda och yashil chorak doira, sarlavhaning oxiri esa uning ustida o'qiladi.

Birinchi kartada nima bo'ldi? Karta relative, lekin z-index siz — u kontekst emas. Bezakning -1 i ildiz kontekstida hisoblandi: 2-qadam, ya'ni oddiy bloklardan ham oldin. Keyin 6-qadamda karta o'z fonini chizdi — va bezakni yopdi.

isolation: isolate kartani yangi stacking context qiladi — boshqa hech narsani o'zgartirmasdan. Endi -1 karta ichida hisoblanadi: kartaning foni — kontekst ildizi (1-qadam), bezak — undan keyin, matn — eng ustda.

5.2 Nega z-index: 0 emas?

Kartaga z-index: 0 berish ham kontekst yaratadi. Lekin u kartaning o'ziga qatlam raqamini ham beradi va tashqi qatlamlar bilan solishtirishga kiradi. isolation: isolate esa faqat "ichingni alohida sarala" deydi — raqam yo'q, tashqi tartibga ta'sir yo'q. flow-root BFC uchun qanday toza vosita bo'lsa (Normal oqim), isolation stacking context uchun shunday.

Qoida: ichida manfiy z-index yoki o'z qatlamlari bor har komponentga isolation: isolate. Komponent ichidagi raqamlar tashqariga "oqib chiqmaydi" va boshqa komponentlarniki bilan urishmaydi. Baseline ma'lumotlariga ko'ra, isolation 2020-yil yanvaridan hamma asosiy brauzerda bor.

Tekshirib ko'ring: Nega bezakni z-index: -1 siz, oddiy ::before qilib qo'ysa bo'lmaydi?

6. z-index shkalasi

6.1 Tasodifiy raqamlar muammosi

Katta loyihada z-index lar turli dasturchilar tomonidan yoziladi: 10, 100, 999, 1000, 9999, 99999. Hech kim "qaysi element qaysidan ustda bo'lishi kerak" degan savolga javob bermaydi. Yangi element qo'shilganda eski raqamlardan kattarog'i qo'yiladi — poyga boshlanadi.

Yechim — qatlamlarni oldindan kelishib olish va CSS o'zgaruvchilari da saqlash:

:root {
  --qatlam-yopishqoq: 10; /* sticky sarlavha, jadval sarlavhasi */
  --qatlam-menyu: 20;     /* ochiladigan menyu */
  --qatlam-ustki: 30;     /* fixed tugma, bildirishnoma */
  --qatlam-otish: 40;     /* skip link — hamma narsadan ustda */
}

header {
  position: sticky;
  top: 0;
  z-index: var(--qatlam-yopishqoq);
}

• Nomlar — vazifaga qarab. "10" emas, "yopishqoq". Kod o'qiganda qaysi qatlam ekani darhol ko'rinadi.
• Oraliq 10 dan. Kelajakda ikki qatlam orasiga yangisi kerak bo'lsa, 15 ga joy bor.
• Faqat global qatlamlar. Karta ichidagi bezak kabi mahalliy tartib shkalaga kirmaydi: u isolation: isolate ichida 1, 2, -1 bilan yashaydi.
• Modal oyna shkalada yo'q — u uchun keyingi bo'limdagi top layer bor.

6.2 Jadval va skip link — shkala bilan

fixed va sticky darsidagi ikki o'qli jadval uchun:

thead th {
  z-index: var(--qatlam-yopishqoq);
}

Skip link fokusda yopishqoq sarlavha ustida bo'lishi uchun:

.otish:focus {
  z-index: var(--qatlam-otish);
}

Dizayn tizimlarida bu raqamlar "token" deb ataladi — ularni Dizayn tokenlari darsida kengaytiramiz.

7. Top layer: z-index'siz eng ustki qatlam

7.1 dialog va popover

dialog va Popover API darslarida modal oyna va popover'ni HTML'ning o'zi bilan ochgan edik. Ular z-index shkalasining umuman tashqarisida — top layer da chiziladi. Top layer — sahifaning barcha stacking context'laridan ustda turadigan maxsus qatlam. U yerga faqat brauzer qo'yadi: modal dialog (showModal() yoki command="show-modal" bilan), ochilgan popover va to'liq ekran rejimidagi element.

Top layer'dagi element uchun stacking context tuzoqlarining hech biri ishlamaydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    position: relative;
    width: 14rem;
    padding: 4px 12px;
    overflow: hidden;
    transform: translate(0);
    border: 2px solid var(--rang-asosiy);
  }
  .aksiya {
    position: relative;
    z-index: 9999;
    padding: 1rem;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
  #osh-tarkibi {
    border: 3px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <button type="button" popovertarget="osh-tarkibi">
    Tarkibi
  </button>
  <div id="osh-tarkibi" popover>
    <p>Guruch, sabzi, qo'y go'shti, zira va no'xat.</p>
    <p>Bir porsiya — 35 000 so'm. Tayyor — 11:00 dan.</p>
  </div>
</article>
<p class="aksiya">Aksiya tasmasi: z-index 9999</p>

Nimaga qarang: "Tarkibi" tugmasini bosing. Popover natija oynasining o'rtasida ochiladi: u karta chegarasidan chiqib turibdi va aksiya tasmasining ham ustida. Uning otasi — karta — overflow: hidden (kesadi), transform (containing block va kontekst yaratadi) — ikkalasi ham popover'ga ta'sir qilmadi. Tashqariga bosing yoki Esc — yopiladi. Chrome'da tekshirdik: popover markazidagi nuqta — popover'ning o'zi, eng katta z-index li fixed qoplama ustida ham.

Popover — Baseline ma'lumotiga ko'ra yangi Baseline (2025-yil yanvar): eski brauzerlarda popover li element ko'rinmay qoladi va tugma hech narsa qilmaydi. dialog esa 2022-yil martidan hamma asosiy brauzerda bor.

7.2 Qachon nima

• Modal oyna, ochiladigan menyu, tooltip, bildirishnoma — avval dialog yoki popover. z-index poygasi, overflow va transform tuzoqlari o'z-o'zidan yo'qoladi. Ularning pardasi (::backdrop) va ochilish animatsiyasi — Top layer darsida.
• Doim ko'rinib turadigan qatlamlar — sticky sarlavha, jadval sarlavhasi, burchakdagi belgi, fokusdagi skip link — z-index va shkala.

Tekshirib ko'ring: Ochiq popover ustiga z-index: 2147483647 li (eng katta mumkin bo'lgan son) fixed banner chiqadimi?

8. Ko'p uchraydigan xatolar

8.1 static elementga z-index

Hech narsa o'zgarmaydi. Tuzatish: position: relative qo'shing (flex/grid bolasi bo'lmasa).

8.2 Raqamni oshiraverish

9999 → 99999 → 999999. Tuzatish: DevTools'da ajdodlar bo'ylab birinchi kontekst yaratuvchini toping va shu darajadagi solishtirishni tuzating.

8.3 Yashirin kontekst

opacity, transform, filter yoki will-change qo'shilgach, ichidagi tooltip qo'shni ostiga tushdi. Tuzatish: «Kontekstni nima yaratadi» jadvalini eslang — effektni boshqa elementga ko'chiring yoki ota kontekstga to'g'ri raqam bering.

8.4 Manfiy z-index yo'qoldi

Bezak otaning foni ostida qoldi. Tuzatish: otaga isolation: isolate.

8.5 Modal uchun z-index: 9999

Oyna ba'zi sahifalarda boshqa elementlar ostida qoladi. Tuzatish: dialog (showModal) yoki popover — top layer.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Kim ustda?

Har juftlikda ustda chiziladigan elementni yozing (A yoki B). Ikkalasi ustma-ust tushadi, HTML'da A oldin, B keyin.

1. A — position: relative; B — oddiy blok —
2. A — position: relative; z-index: 1; B — position: relative —
3. A va B — ikkalasi position: absolute, z-index yo'q —
4. A — z-index: 5 li kontekst ichida z-index: 1000; B — ildizda z-index: 6 —

Ishora: «Qoida — pastdan tepaga» dagi tartib va «Papka o'xshatishi» dagi kitoblar.

2-mashq (o'rta): Ikki o'qli jadvalni tuzating

fixed va sticky darsidagi 2-mashq jadvalida ikki muammo qoldi: pastga surganda kun nomlari sarlavha qatori ustiga chiqadi, chap yuqori "Kun" katagi esa gorizontal surganda ketib qoladi. Shkaladagi o'zgaruvchi bilan tuzating.

Ishora: "Kun" katagi ham top, ham left bo'yicha qotishi va hamma kataklardan ustda bo'lishi kerak. Gorizontal surganda qolgan sarlavha kataklari uning ustidan o'tadi — ular ham thead th.

thead th {
  z-index: var(--qatlam-yopishqoq);
}

thead th:first-child {
  left: 0;
  z-index: calc(var(--qatlam-yopishqoq) + 1);
}

3-mashq (qiyin): Bildirishnoma ko'rinmayapti

«Bahor» bron sahifasida "Bron qabul qilindi" bildirishnomasi:

main {
  opacity: 0.99;
}
.bildirishnoma {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
}
header {
  position: sticky;
  top: 0;
  z-index: 10;
}

HTML: body ichida header, keyin main, bildirishnoma — main ichida. Bildirishnoma sarlavha ostida qolyapti.

1. Kontekstlar daraxtini chizing (qog'ozda yoki mermaid'da).
2. Sababni bir gap bilan ayting.
3. Ikki xil tuzatishni yozing: biri — CSS'ni o'zgartirmasdan HTML bilan, ikkinchisi — top layer bilan.

Ishora: «Kontekstni nima yaratadi» jadvalidagi opacity qatori. opacity: 0.99 ko'zga ko'rinmaydi, lekin kontekst yaratadi.

flowchart TD
  R["html — ildiz"] --> H["header — sticky<br/>z-index: 10"]
  R --> M["main — opacity 0.99<br/>(kontekst, z-index yo'q)"]
  M --> B[".bildirishnoma<br/>z-index: 9999"]

4-mashq: Portfolio qadami — qatlamlar shkalasi

Portfoliongizda hozir ikkita positsiyalangan narsa bor: fokusdagi skip link (position) va o'qish rejasi jadvalining sticky sarlavhasi (fixed va sticky). Ular hozir ustma-ust tushmaydi. Lekin ertaga sahifaga yopishqoq sarlavha yoki fixed tugma qo'shsangiz ham, skip link doim eng ustda bo'lishi kerak.

1. :root ga to'rt qatlamli shkalani qo'shing («Tasodifiy raqamlar muammosi» dagi nomlar bilan).
2. Skip link'ning fokus holatiga eng yuqori qatlamni bering.
3. Jadval sarlavhasiga yopishqoq qatlamni bering.
4. Faylda z-index ning raqamli qiymati faqat :root da qolganini tekshiring (VS Code'da Ctrl + F → z-index).

Ishora: «z-index shkalasi» bo'limi.

:root {
  /* ...oldingi rang o'zgaruvchilari... */
  --qatlam-yopishqoq: 10;
  --qatlam-menyu: 20;
  --qatlam-ustki: 30;
  --qatlam-otish: 40;
}

.otish:focus {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--qatlam-otish);
  padding: 0.5rem 1rem;
  background-color: var(--rang-asosiy);
  color: var(--rang-fon);
}

thead th {
  position: sticky;
  top: 0;
  z-index: var(--qatlam-yopishqoq);
  background-color: var(--rang-fon);
}

10. Real ishda

• Dizayn tizimlari qatlamlarni nomli tokenlarda saqlaydi: Material Design, Bootstrap ($zindex-dropdown, $zindex-modal kabi o'zgaruvchilar), Tailwind'ning z-10, z-20... sinflari. Qoida hamma joyda bir xil — raqamlar kelishilgan, tasodifiy emas.
• UI kutubxonalar komponentlarga isolation: isolate qo'yadi, ichki qatlamlar tashqariga ta'sir qilmasin.
• Zamonaviy modal va menyular dialog va popover'ga o'tmoqda: z-index poygasidan qutulishning eng ishonchli yo'li.
• Intervyuda so'raladi: "Stacking context nima?", "Nega z-index ishlamayapti?" (klassik), "opacity z-index'ga qanday ta'sir qiladi?", "isolation: isolate nima uchun?", "Top layer nima?".

Xulosa

• Qatlamlash tartibi: kontekst foni → manfiy z-index → bloklar → float → matn → positsiyalangan (auto/0) → musbat z-index.
• z-index positsiyalangan (yoki flex/grid bolasi) elementga ishlaydi va faqat bitta stacking context ichida solishtiriladi.
• Kontekstni position + son z-index, fixed/sticky, opacity < 1, transform, filter, isolation, will-change, contain yaratadi.
• "9999 baribir ostida" — ajdodlardagi kontekstni toping va shu darajada solishtiring.
• isolation: isolate — komponent ichidagi qatlamlarni ajratadi; manfiy z-index uchun zarur.
• Global qatlamlar — --qatlam-* shkalasi; modal va popover — top layer, z-index'siz.

Keyingi dars: Mantiqiy xususiyatlar va yozuv yo'nalishlari — margin-left o'rniga margin-inline-start: arabcha va vertikal matnda ham to'g'ri ishlaydigan CSS.

Manbalar

• MDN: "z-index", "Stacking context", "isolation", "Top layer", "Popover API" — developer.mozilla.org
• W3C: "CSS 2.2 — Appendix E. Elaborate description of Stacking Contexts" — w3.org/TR/CSS22/zindex.html
• W3C: "CSS Positioned Layout Module Level 4" (top layer) — w3.org/TR/css-position-4
• web-features (Baseline ma'lumotlari): "isolation", "popover", "dialog", "z-index" — github.com/web-platform-dx/web-features