CSS'da z-index xususiyati nima uchun xizmat qiladi?

CSS'dagi z-index xususiyati, Z o'qida joylashgan elementlarning qavatlash tartibini boshqaradi. z-index ning katta qiymatga ega elementlari kichik qiymatga ega bo'lganlardan yuqoriroqda joylashadi.

Asosiy nuqtalar:

• Faqat pozitsiyalangan elementlarga taalluqlidir (position: relative, absolute, fixed, sticky).
• Qiymat raqam bo'lishi mumkin (musbat, manfiy yoki nol).
• Avtomatik qiymat (auto) DOM daraxtidagi tartibga mos keladi.
• Manfiy z-index qiymatlari elementni ostida joylashtirishi mumkin, ya'ni ota-ona element va uning mazmunidan pastda.
• z-index yigilish kontekstini (stacking context) yaratadi. Bir xil kontekst ichidagi elementlar z-index bo'yicha tartiblanadi, lekin butun kontekst boshqa kontekstlarga nisbatan yagona birlik sifatida harakat qiladi.

Standart yigilish tartibi (z-index bo'lmagan holatda):

1. Asosiy elementning fon va chegaralari.
2. Manfiy z-index bilan joylashgan elementlar.
3. Oddiy oqimdagi blok elementlar.
4. Yopishgan elementlar (float).
5. Oddiy oqimdagi satrli elementlar.
6. z-index: auto yoki z-index: 0 bilan joylashgan elementlar.
7. Musbat z-index bilan joylashgan elementlar.

Misol:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Yuqorida bo'ladi */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Pastda bo'ladi */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Bu holatda, qizil blok (z-index: 1) ko'k blok (z-index: 0) ustida joylashadi.