z-index nədir və veb inkişafında necə istifadə olunur?

z-index — CSS xüsusiyyətidir və elementlərin Z oxu üzrə yığılma sırasını müəyyən edir. Daha böyük z-index dəyərinə malik elementlər, kiçik z-index dəyərinə malik elementlərin üzərində göstərilir.

Bu, yerləşdirmə ilə əlaqəli elementlərin (yəni, position xüsusiyyəti static-dən fərqli olan elementlər) yığılma dərinliyini idarə etmək üçün istifadə olunur: relative, absolute, fixed, sticky.

İstifadənin əsas nöqtələri:

• Statik yerləşdirməyə malik elementlər (position: static;) yığılma kontekstində iştirak etmir və z-index-i nəzərə almır.
• z-index dəyəri yalnız yeni yığılma konteksti yaradan elementlərə tətbiq olunur. Bu kontekst, məsələn, position static olmayan dəyərlərlə və ya digər CSS qaydaları (məsələn, opacity < 1) istifadə edilərək yaradılır.
• Eyni yığılma kontekstində, daha yüksək z-index olan elementlər yuxarıda yerləşir.
• İç-içə yığılma kontekstləri, valideyn kontekst daxilində birləşmiş şəkildə yığılır.
• z-index-in açıq şəkildə təyin olunmaması halında, yığılma sırası DOM-də elementlərin sırasına görə müəyyən edilir.

İstifadə nümunəsi:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* .box2-dən yuxarı */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* .box1-dən aşağı */
}