CSS-də z-index xüsusiyyəti nə üçün cavabdehdir?

CSS-də z-index xüsusiyyəti, Z oxu boyunca mövqelənmiş elementlərin yığılma sırasını idarə edir. Daha böyük z-index dəyərinə malik elementlər, kiçik dəyərə malik olanların üzərində yerləşir.

Əsas nöqtələr:

• Yalnız mövqeləndirilmiş elementlərə tətbiq olunur (position: relative, absolute, fixed, sticky).
• Dəyər bir ədəd ola bilər (müsbət, mənfi və ya sıfır).
• Avtomatik dəyər (auto) DOM ağacındakı sıralamaya uyğundur.
• Mənfi z-index dəyərləri elementi altında yerləşdirə bilər, yəni valideyn və onun məzmununun altında.
• z-index yığılma kontekstini (stacking context) yaradır. Eyni kontekstdəki elementlər z-index-ə görə sıralanır, amma bütün kontekst digər kontekstlərə nisbətən bir vahid kimi davranır.

Varsayılan yığılma sırası (z-index olmadan):

1. Əsas elementin fonu və sərhədləri.
2. Mənfi z-index ilə mövqeləndirilmiş elementlər.
3. Normal axında blok elementlər.
4. Yüzdürülmüş elementlər (float).
5. Normal axında inline elementlər.
6. z-index: auto və ya z-index: 0 ilə mövqeləndirilmiş elementlər.
7. Müsbət z-index ilə mövqeləndirilmiş elementlər.

Nümunə:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Yuxarıda olacaq */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Aşağıda olacaq */
}

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

Bu halda, qırmızı blok (z-index: 1) mavi blok (z-index: 0) üzərində yerləşəcək.