Stacking context nedir? z-index neden bazen çalışmaz?

z-index yalnızca aynı stacking context içindeki elemanları sıralar. Bir eleman yeni bir stacking context oluşturursa, çocuklarının z-index'i ne kadar büyük olursa olsun o context'in dışına çıkamaz.

Yeni stacking context oluşturan durumlar:

• position relative/absolute + z-index değeri, ya da position: fixed / sticky
• opacity 1'den küçük
• transform, filter, perspective, will-change
• isolation: isolate
• Flex/grid çocuğu + z-index

Tipik sorun: bir modalın z-index: 9999 olmasına rağmen başka bir kutunun altında kalması. Nedeni çoğunlukla modalın, transform veya opacity uygulanmış bir ebeveynin içinde olmasıdır. Çözüm: modalı body seviyesine taşımak (React'te portal).

z-index yalnızca konumlandırılmış elemanlarda ve flex/grid çocuklarında çalışır; position: static bir elemanda etkisizdir.