CSS'de z-index özelliği ne işe yarar?

CSS'deki z-index özelliği, konumlandırılmış öğelerin Z ekseni boyunca yığılma sırasını kontrol eder. Daha büyük z-index değeri olan öğeler, daha küçük değere sahip olanların üzerinde yer alır.

Ana noktalar:

• Sadece konumlandırılmış öğelere uygulanır (position: relative, absolute, fixed, sticky).
• Değer bir sayı olabilir (pozitif, negatif veya sıfır).
• Otomatik değer (auto), DOM ağacındaki sıralamaya karşılık gelir.
• Negatif z-index değerleri, öğeyi altında ana öğe ve içeriğinin altına yerleştirebilir.
• z-index, bir yığılma bağlamı (stacking context) oluşturur. Aynı bağlam içindeki öğeler z-index değerlerine göre sıralanır, ancak tüm bağlamlar diğer bağlamlara göre tek bir birim gibi davranır.

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

1. Kök öğenin arka planı ve sınırları.
2. Negatif z-index ile konumlandırılmış öğeler.
3. Normal akışta blok öğeleri.
4. Yüzen öğeler (float).
5. Normal akışta satır içi öğeler.
6. z-index: auto veya z-index: 0 ile konumlandırılmış öğeler.
7. Pozitif z-index ile konumlandırılmış öğeler.

Örnek:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Üstte olacak */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Altta olacak */
}

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

Bu durumda, kırmızı blok (z-index: 1) mavi blok (z-index: 0) üzerinde yer alacaktır.