z-index bir öğenin diğerlerinin üstünde mi altında mı olacağını belirler ama çoğu zaman tek başına yetmez.

Neden olur?

En sık neden: z-index yalnızca position değeri static olmayan (relative, absolute, fixed, sticky) öğelerde çalışır. Ayrıca 'stacking context' katmanları etkiler.

Hatalı kod

.ust {
  z-index: 999;   /* position yok -> etkisiz */
}

Doğru kod

.ust {
  position: relative;   /* veya absolute/fixed */
  z-index: 999;
}

Kontrol listesi

  • z-index için öğeye bir position ver (static hariç).
  • Bir ebeveynin düşük z-index'i çocukları da sınırlayabilir (stacking context).
  • opacity, transform gibi özellikler de yeni yığın bağlamı oluşturur.

CSS derslerimizle tasarımı pekiştir.