z-index nima va u veb-ishlab chiqishda qanday ishlatiladi?

z-index — bu CSS xususiyati bo'lib, elementlarning Z o'qi bo'yicha joylashishiga qarab ularning qavatlash tartibini belgilaydi. Katta z-index qiymatiga ega elementlar kichik z-index qiymatiga ega elementlar ustida ko'rsatiladi.

Ushbu xususiyat pozitsiyalash bilan bog'liq elementlarning (ya'ni, position xususiyati static dan boshqa qiymatga ega bo'lgan elementlar) qavatlash chuqurligini boshqarish uchun ishlatiladi: relative, absolute, fixed, sticky.

Asosiy foydalanish nuqtalari:

• Statik pozitsiyalashga ega elementlar (position: static;) qavatlash kontekstida qatnashmaydi va z-indexni e'tiborga olmaydi.
• z-index qiymati faqat yangi qavatlash kontekstini yaratadigan elementlarga nisbatan qo'llaniladi. Bu kontekst, masalan, position qiymati static bo'lmagan holda yoki boshqa CSS qoidalarini (masalan, opacity < 1) qo'llash bilan yaratiladi.
• Bir qavatlash kontekstida, yuqori z-index ga ega elementlar yuqorida joylashadi.
• Ichma-ich joylashgan qavatlash kontekstlari, ota-ona kontekst ichida yagona birlik sifatida joylashadi.
• Agar z-index aniq belgilangan bo'lmasa, qavatlash tartibi DOMdagi elementlar tartibiga qarab belgilanadi.

Foydalanish misoli:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* .box2 ustida bo'ladi */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* .box1 ostida bo'ladi */
}