Heç CSS-nizdəki bir elementə z-index: 99999 təyin etmisiniz və o, digər elementlərin üstünə çıxmır? Bütün müxtəlif elementlərin daha aşağı qiymətə təyin edildiyini və ya ümumiyyətlə təyin olunmadığını fərz etsək, böyük olan dəyər həmin elementi vizual olaraq asanlıqla başqa hər şeyin üstünə qoymalıdır. Veb səhifə adətən ikiölçülü məkanda təmsil olunur; lakin, xüsusi CSS xassələrini tətbiq etməklə, dərinliyi çatdırmaq üçün xəyali Z oxu müstəvisi təqdim edilir. Bu müstəvi ekrana perpendikulyardır və ondan istifadəçi bir-birinin üstündə olan elementlərin sırasını qavrayır. Xəyali z oxunun, istifadəçinin yığılmış elementləri qavrayışının arxasında duran ideya ondan ibarətdir ki, onu yaradan CSS xassələri birləşərək yığma kontekst dediyimiz şeyi əmələ gətirir. Elementlərin veb-səhifədə necə “yığınlandığı”, yığma sırasına nəyin nəzarət etdiyi və lazım olduqda elementləri “çıxarmaq” üçün praktik yanaşmalar haqqında danışacağıq. Yığma kontekstləri haqqında Veb səhifənizi bir masa kimi təsəvvür edin. HTML elementlərini əlavə edərkən, bir-birinin ardınca masanın üzərinə kağız parçaları qoyursunuz. Yerləşdirilmiş son kağız parçası ən son əlavə edilmiş HTML elementinə bərabərdir və ondan əvvəl yerləşdirilən bütün digər sənədlərin üstündə oturur. Bu, hətta daxili elementlər üçün də normal sənəd axınıdır. İş masasının özü bütün digər qovluqları ehtiva edən elementi tərəfindən yaradılmış kök yığma kontekstini təmsil edir. İndi xüsusi CSS xassələri işə düşür. Mövqe (z-indeksi ilə), qeyri-şəffaflıq, transformasiya və ehtiva edən xüsusiyyətlər qovluq kimi fəaliyyət göstərir. Bu qovluq elementi və onun bütün uşaqlarını götürür, onları əsas yığından çıxarır və ayrıca alt yığında qruplaşdırır və yığma kontekst adlandırdığımızı yaradır. Yerləşdirilmiş elementlər üçün bu, autodan başqa z-index dəyərini elan etdikdə baş verir. Qeyri-şəffaflıq, transformasiya və filtr kimi xüsusiyyətlər üçün xüsusi dəyərlər tətbiq edildikdə yığma kontekst avtomatik olaraq yaradılır.
Bunu başa düşməyə çalışın: Bir kağız parçası (yəni, uşaq element) qovluğun içərisinə daxil olduqdan sonra (yəni, valideynin yığma konteksti) o, heç vaxt həmin qovluqdan çıxa və ya başqa qovluqdakı kağızlar arasında yerləşdirilə bilməz. Onun z-indeksi indi yalnız öz qovluğuna aiddir.
Aşağıdakı şəkildə, Kağız B indi B Qovluğunun yığma kontekstindədir və yalnız qovluqdakı digər sənədlərlə birlikdə sifariş verilə bilər.
Təsəvvür edin ki, istəsəniz, masanızda iki qovluq var:
.qovluq-a { z-index: 1; } .qovluq-b {z-indeks: 2; }
İşarələməni bir az yeniləyək. Qovluq A xüsusi səhifədir, z-index: 9999. Qovluq B daxilində düz səhifədir, z-index: 5.
.xüsusi səhifə { z-indeks: 9999; } .düz səhifə { z indeksi: 5; }
Hansı səhifə yuxarıdadır? Bu, B Qovluğundakı .plain-səhifədir. Brauzer uşaq sənədlərə məhəl qoymur və əvvəlcə iki qovluğu yığır. O, B qovluğunu (z-indeks: 2) görür və onu A Qovluğunun (z-indeksi: 1) üstünə qoyur, çünki ikinin birdən böyük olduğunu bilirik. Eyni zamanda, z-index: 9999-a təyin edilmiş .special-səhifə, z-indeksi mümkün olan ən yüksək dəyərə təyin olunsa da, yığının aşağı hissəsindədir. Yığma kontekstləri də "ailə ağacı" yaradaraq (qovluqların içərisində qovluqlar) yerləşdirilə bilər. Eyni prinsip tətbiq olunur: uşaq heç vaxt valideynlərinin qovluğundan qaça bilməz. Yığma kontekstlərinin təbəqələri qruplaşdıran və yenidən sıralayan qovluqlar kimi necə davrandığını anladığınız üçün soruşmağa dəyər: nə üçün müəyyən xüsusiyyətlər - transformasiya və qeyri-şəffaflıq - yeni yığma kontekstləri yaradır? Məsələ burasındadır: bu xüsusiyyətlər görünüşlərinə görə yığma kontekstlər yaratmır; brauzerin başlıq altında necə işlədiyinə görə bunu edirlər. Transformasiya, qeyri-şəffaflıq, filtr və ya perspektiv tətbiq etdikdə, siz brauzerə deyirsiniz: “Hey, bu element hərəkət edə, dönə və ya sönə bilər, ona görə də hazır ol!”
Bu xassələrdən istifadə etdiyiniz zaman brauzer göstərilməsini daha səmərəli idarə etmək üçün yeni yığma konteksti yaradır. Bu, brauzerə animasiyalar, transformasiyalar və vizual effektləri müstəqil idarə etməyə imkan verir, bu elementlərin səhifənin qalan hissəsi ilə qarşılıqlı əlaqəsini yenidən hesablamaq ehtiyacını azaldır. Bunu brauzerin dediyi kimi düşünün: "Mən bu qovluğu ayrıca idarə edəcəyəm ki, hər dəfə içərisində bir şey dəyişəndə bütün masanı dəyişmək məcburiyyətində qalmayacağam." Amma varyan təsir. Brauzer elementi öz təbəqəsinə qaldırdıqdan sonra onun içindəki hər şeyi “düzləşdirməli” və yeni yığma kontekstini yaratmalıdır. Bu, qovluğu ayrıca idarə etmək üçün masanın üstündən götürməyə bənzəyir; həmin qovluğun içindəki hər şey qruplaşdırılır və brauzer indi nəyin üstündə oturduğuna qərar verərkən ona vahid vahid kimi yanaşır. Beləliklə, transformasiya və qeyri-şəffaflıq xüsusiyyətləri elementlərin vizual olaraq yığılma tərzinə təsir göstərməsə də, bunu edirlər və bu, performansın optimallaşdırılması üçündür. Bir neçə digər CSS xassələri də oxşar səbəblərə görə yığma kontekstlər yarada bilər. Daha dərindən qazmaq istəyirsinizsə, MDN tam siyahı təqdim edir. Kifayət qədər az sayda var ki, bu da bilmədən təsadüfən yığma kontekst yaratmağın nə qədər asan olduğunu göstərir. "Yığından çıxarılması" problemi Yığma problemləri bir çox səbəbə görə yarana bilər, lakin bəziləri digərlərindən daha çox yayılmışdır. Modal komponentlər klassik nümunədir, çünki onlar komponenti bütün digər elementlərin üstündəki üst qatda “açmaq” üçün dəyişdirməyi, sonra “bağlanan” zaman onu yuxarı təbəqədən çıxarmağı tələb edir. Əminəm ki, hamımız bir modal açdığımız və hər hansı səbəbdən görünmədiyi bir vəziyyətə düşdük. Düzgün açılmaması deyil, yığma kontekstinin aşağı qatında görünməməsidir. Bu, sizi “necə oldu?” sualına vadar edir. təyin etdiyinizdən:
.overlay { mövqe: sabit; /* yığma kontekstini yaradır */ z indeksi: 1; /* elementi hər şeydən yuxarı bir təbəqəyə qoyur */ daxil: 0; eni: 100%; hündürlük: 100vh; daşqın: gizli; fon rəngi: #00000080; }
Bu düzgün görünür, lakin modal tetikleyicisini ehtiva edən əsas element, həmçinin z-index: 1-ə təyin edilmiş başqa bir ana element daxilində uşaq elementdirsə, bu, texniki olaraq modalı əsas qovluq tərəfindən gizlənmiş alt təbəqəyə yerləşdirir. Gəlin bu xüsusi ssenariyə və bir neçə başqa ümumi yığıncaq kontekstində tələlərə baxaq. Düşünürəm ki, nəinki istər-istəməz yığılma kontekstləri yaratmağın nə qədər asan olduğunu, həm də onları necə düzgün idarə etməyinizi görəcəksiniz. Həmçinin, idarə olunan vəziyyətə necə qayıtmağınız vəziyyətdən asılıdır. Ssenari 1: Tutulmuş Modal
Modalınızın aşağı səviyyəli təbəqədə sıxışdığını dərhal görə bilərsiniz və valideyni müəyyən edə bilərsiniz. Brauzer uzantıları Ağıllı tərtibatçılar kömək etmək üçün genişləndirmələr hazırlayıblar. Bu “CSS Stacking Context Inspector” Chrome genişləndirilməsi kimi alətlər yığma kontekstini yaradan elementlər haqqında məlumat göstərmək üçün DevTools-a əlavə z-indeks nişanı əlavə edir.
IDE uzantıları Siz hətta redaktorunuzda potensial yığma kontekst problemlərini vurğulayan VS Kodu üçün bu kimi genişlənmə ilə inkişaf zamanı problemləri aşkar edə bilərsiniz.
Yığmanın çıxarılması və nəzarətin bərpası Kök səbəbi müəyyən etdikdən sonra növbəti addım onunla məşğul olmaqdır. Bu problemi həll etmək üçün istifadə edə biləcəyiniz bir neçə yanaşma var və mən onları sıra ilə sadalayacağam. Siz istənilən səviyyədə hər kəsi seçə bilərsiniz; heç kim başqasına şikayət edə və ya mane ola bilməz. HTML strukturunu dəyişdirin Bu optimal həll hesab olunur. Yığma kontekstində problemlə qarşılaşmağınız üçün HTML daxilində bəzi elementləri gülməli mövqelərə yerləşdirmiş olmalısınız. Səhifənin yenidən qurulması DOM-u yenidən formalaşdırmağa və yığma kontekst problemini aradan qaldırmağa kömək edəcək. Problemli elementi tapın və onu HTML işarələməsindəki tutma elementindən çıxarın. Məsələn, .modal-konteyneri başlıqdan kənara çıxarıb onu özbaşına
elementinə yerləşdirməklə birinci ssenari olan “Tələblənmiş modal”ı həll edə bilərik.Başlıq
Əsas Məzmun
Bu məzmunun z indeksi 2 var və hələ də modalı əhatə etməyəcək.
"Açıq Modal" düyməsini kliklədiyiniz zaman modal olması lazım olduğu kimi hər şeyin qarşısında yerləşdirilir. Qələm Ssenarisi 1-ə baxın: Şoyombo Qabriel Ayomide tərəfindən tələyə salınmış modal (həll). TənzimləyinCSS-də ana yığma konteksti Bəs element quruluşu pozmadan hərəkət edə bilməyəcəyiniz bir elementdirsə? Problemi həll etmək daha yaxşıdır: valideyn konteksti müəyyən edir. Konteksti işə salmaq üçün məsul olan CSS xassəsini (və ya xassələrini) tapın və onu silin. Əgər onun məqsədi varsa və onu çıxarmaq mümkün deyilsə, bütün konteyneri qaldırmaq üçün valideynə bacı elementlərindən daha yüksək z indeksi verin. Daha yüksək z-indeks dəyəri ilə ana konteyner yuxarıya doğru hərəkət edir və onun uşaqları istifadəçiyə daha yaxın görünür. “Sualtı açılan menyu” ssenarisində öyrəndiklərimizə əsasən, açılan menyunu naviqasiya panelindən kənara köçürə bilmərik; məntiqli olmazdı. Bununla belə, biz .navbar konteynerinin z-indeks dəyərini .content elementinin z-indeks dəyərindən böyük olması üçün artıra bilərik. .navbar { fon: #333; /* z-indeks: 1; */ z indeksi: 3; mövqe: nisbi; }
Bu dəyişikliklə .açılan menyu indi heç bir problem olmadan məzmunun qarşısında görünür.
Qələm Ssenarisi 2-yə baxın: Şoyombo Qabriel Ayomide tərəfindən [çəngəllənmiş] Sualtı Açılan Aşağıya (Həll).
Çərçivədən istifadə edirsinizsə, Portalları sınayın
React və ya Vue kimi çərçivələrdə Portal komponenti DOM-da normal ana iyerarxiyasından kənarda göstərməyə imkan verən xüsusiyyətdir. Portallar komponentləriniz üçün teleportasiya cihazı kimidir. Onlar komponentin HTML-ni sənədin istənilən yerində (adətən sənəd.body-də) göstərməyə imkan verir, eyni zamanda onu rekvizitlər, vəziyyət və hadisələr üçün orijinal ana ilə məntiqi olaraq əlaqələndirir. Bu, yığılmış kontekst tələlərindən qaçmaq üçün mükəmməldir, çünki göstərilən çıxış sözün əsl mənasında problemli ana konteynerdən kənarda görünür.
ReactDOM.createPortal(
Bu, valideynin daşması: gizli və ya daha aşağı z indeksi olsa belə, açılan məzmununuzun valideynin arxasında gizlənməməsini təmin edir. Daha əvvəl baxdığımız “Kəsilmiş alət ipucu” ssenarisində mən alət ipucunu daşqınlıqdan xilas etmək üçün Portaldan istifadə etdim: gizli klipi sənədin gövdəsinə yerləşdirərək və konteynerin içərisindəki tətiyin üstündə yerləşdirərək. Qələm Ssenarisi 3-ə baxın: Şoyombo Qabriel Ayomide tərəfindən kəsilmiş alət ucu (Hol) [çəngəllənmiş]. Yan Təsirlər Olmadan Yığma Kontekstini Təqdim edin Əvvəlki bölmədə izah edilən bütün yanaşmalar problemli yığma kontekstlərdən elementlərin “çıxarılmasına” yönəlib, lakin yığma kontekstinə həqiqətən ehtiyac duyacağınız və ya yaratmaq istədiyiniz bəzi vəziyyətlər var. Yeni yığma kontekstini yaratmaq asandır, lakin bütün yanaşmalar yan təsir göstərir. Yəni, izolyasiyadan istifadə istisna olmaqla: təcrid et. Elementə tətbiq edildikdə, həmin elementin uşaqlarının yığma konteksti ondan kənar elementlərdən təsirlənməkdənsə, hər bir uşağa nisbətən və həmin kontekstdə müəyyən edilir. Klassik nümunə həmin elementə z-index kimi mənfi qiymət təyin etməkdir: -1. Təsəvvür edin ki, sizin .card komponentiniz var. Siz .card mətninin arxasında, lakin kartın fonunun üstündə yerləşən dekorativ forma əlavə etmək istəyirsiniz. Kartda yığma konteksti olmadan, z-index: -1 formanı kök yığma kontekstinin (bütün səhifə) altına göndərir. Bu, onu .card-ın ağ fonunun arxasında yox edir: Shoyombo Gabriel Ayomid tərəfindən Qələmin Mənfi z-indeksinə (problem) baxın. Bunu həll etmək üçün biz izolyasiya elan edirik: ana .kartda izolyasiya: Shoyombo Gabriel Ayomid tərəfindən Qələmin Mənfi z-indeksinə (həlli) baxın. İndi .card elementinin özü yığma kontekstinə çevrilir. Onun uşaq elementi - :before psevdo-element üzərində yaradılmış dekorativ forma - z indeksinə malik olduqda: -1, o, valideynin yığma kontekstinin ən aşağı hissəsinə keçir. O, nəzərdə tutulduğu kimi mətnin arxasında və kartın fonunun üstündə mükəmməl şəkildə oturur. Nəticə Yadda saxlayın: növbəti dəfə z-indeksiniz nəzarətdən kənar görünsə, bu, yığılmış kontekstdir. İstinadlar
Yığma konteksti (MDN) Z indeksi və yığma kontekstləri (web.dev) “CSS-də İzolyasiya Mülkiyyəti ilə Yeni İstifləmə Kontekstini Necə Yaratmaq olar”, Natalie Pina "Nə The Heck, z-index?", Josh Comeau
SmashingMag-da Əlavə Oxu
“Böyük Layihələrdə CSS Z-İndeksinin İdarə Edilməsi”, Steven Frieson "Yapışqan başlıqlar və tam hündürlüklü elementlər: çətin birləşmə", Philip Braunen "Komponent əsaslı veb proqramda Z-indeksinin idarə edilməsi", Pavel Pomerantsev "Z-Index CSS Mülkiyyəti: Hərtərəfli Baxış", Louis Lazaris
