z-index çakışan öğelerin ön-arka yığınlama sırasını kontrol eder — daha yüksek değerler üstte oturur. Ancak yalnızca konumlandırılmış öğelerde çalışır ve bir stacking context içinde çalışır, bu da z-index kafa karışıklığının çoğunun kaynağıdır.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index position: static (varsayılan) üzerinde yok sayılır — öğe uygulanması için relative, absolute, fixed veya sticky olmalıdır.
Bir stacking context, kendi içinde kapalı bir "katman"dır. z-index değerleri yalnızca aynı bağlam içinde rekabet eder — bir çocuk, z-index değeri ne kadar yüksek olursa olsun, asıl öğesinin yığınlama seviyesinden asla kaçamaz.
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }
.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/* because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
Bu klasik "benim z-index: 9999 modal hâlâ bir şeyin arkasında" hatası — modal, daha düşük bir katmanda olan bir ebeveyn içinde sıkışmış.
Birçok özellik sessizce bir tane oluşturur, bu da torunları tuzağa düşürebilir:
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
Uygulamada, modelleri/araç ipuçlarını DOM'nin üstünde (React portals) işleyin, böylece düşük katmanlı bir ebeveyn içinde sıkışmayan.
Stacking contexts, en şaşırtıcı z-index hatalarını açıklar: ataları daha düşük bir katmanda olduğu için hâlâ kaybeden muazzam bir z-index.
opacity, transform ve konumlandırılmış z-index'in context oluşturduğunu — ve çocukların onlardan kaçamayacağını — bilmek, overlay/dropdown sıralaması hataları ayıklamanıza ve DOM'unuzu (portals) doğru şekilde yapılandırmanıza olanak tanır.