CSS Stacking Context və z-index vizualizatoru
Dəfələrlə z-index: 99999 yazmısınız, lakin element yenə də qonşu blokun altında qalır? Səbəb — yeni «Stacking Context» (qatlaşma konteksti) yaranmasıdır. 3D izometrik baxışla layların hansı səviyyədə yerləşdiyini canlı görün.
/* Valideyn yeni Stacking Context yaradır */
.card-a {
position: relative;
z-index: 1;
isolation: isolate; /* və ya opacity: 0.99, transform */
}
/* Bu element digər kontekstləri aşa bilmir */
.child-modal {
position: absolute;
z-index: 9999; /* Valideynin z-index: 1 səviyyəsində ilişib qalır */
}Necə istifadə etmək olar
- Hazır ssenarilərdən birini seçin: «Tələyə düşmüş Modal», «Dropdown qonşu blokun arxasında», yaxud «isolation: isolate ilə təmiz həll».
- 3D izometrik görünüşü (3D Layers) yandıraraq elementlərin hündürlük fərqini fəzada fırladıb izləyin.
- Valideyn blokun «Trigger» parametrlərini (opacity < 1, transform, filter, isolation) yandırıb-söndürün və uşaq elementin necə bloklandığını müşahidə edin.
- İzahat qutusunda hansı CSS xüsusiyyətinin yeni kontekst yaratdığını oxuyun və düzgün arxitekturanı CSS kodu kimi kopyalayın.
Bu necə işləyir
Stacking Context nədir?
Stacking Context — veb-səhifədə elementlərin istifadəçiyə doğru Z oxu üzrə necə üst-üstə düzülməsini təyin edən 3D qatlaşma sahəsidir. Yeni kontekst yarandıqda onun daxilindəki bütün uşaq elementlər həmin kontekstin «dustaqı» olur: uşağın z-index-i milyard olsa belə, o, valideyn kontekstindən yuxarı qalxa bilmir.
Kontekst yaradan əsas CSS xassələri
Təkcə z-index deyil, aşağıdakı müasir xassələr də avtomatik yeni stacking context formalaşdırır: opacity < 1, transform != none, filter != none, clip-path, mix-blend-mode, contain: paint/layout və isolation: isolate.
/* Valideyndə cəmi 1% şəffaflıq və ya 0px blur varsa, yeni kontekst yaranır! */
.parent {
opacity: 0.99; /* Yeni Stacking Context! */
}isolation: isolate — Z-index xaosunun müasir çarəsi
Əvvəllər təsadüfi kontekst yaratmamaq üçün çətinlik çəkirdik, lakin bəzən məhz elementin daxilindəki layları qapalı qutu etmək lazımdır. isolation: isolate xassəsi heç bir yan təsir (şəffaflıq və ya hərəkət) olmadan lokal qatlaşma qutusu yaradır və z-index sızmasının qarşısını alır.
.widget {
isolation: isolate; /* Daxili z-index-lər çölə qarışmır */
}Tez-tez verilən suallar
z-index niyə elementdə təsir etmir?
Elementin position xassəsi standart static olduqda z-index işləmir (Flex və Grid uşaqları istisna olmaqla). Elementə position: relative, absolute və ya fixed vermək lazımdır.
Niyə Modal və ya Dropdown menyu həmişə body sonuna yerləşdirilir?
React Portals və oxşar mexanizmlərin əsas məqsədi Modalı və ya Dropdown-u dərin komponentlərin Stacking Context tələsindən xilas edib birbaşa <body> kökündə açmaqdır.
Stacking Context-i necə yoxlamaq olar?
Brauzerlərin (Chrome DevTools) «Layers» panelində bütün 3D kompozisiya qatlarını əyani şəkildə fırladıb yoxlamaq olar.
