Сіз z-index: 99999 параметрін CSS-дегі элементке орнатқан кезіңіз болды ма және ол басқа элементтердің үстіне шықпайды ма? Барлық әртүрлі элементтер төменірек мәнге орнатылған немесе мүлде орнатылмаған болса, үлкен мән сол элементті кез келген нәрсенің үстіне көрнекі түрде оңай орналастыруы керек. Веб-бет әдетте екі өлшемді кеңістікте көрсетіледі; дегенмен, арнайы CSS сипаттарын қолдану арқылы тереңдікті беру үшін ойдан шығарылған z осі жазықтығы енгізіледі. Бұл жазықтық экранға перпендикуляр және одан пайдаланушы элементтердің бірінің үстіне бірі орналасқан ретін қабылдайды. Ойдан шығарылған z осінің, пайдаланушының жинақталған элементтерді қабылдауының идеясы - оны жасайтын CSS сипаттары біз жинақтау контексі деп атайтын нәрсені қалыптастыру үшін біріктіріледі. Біз элементтердің веб-бетте қалай «қалыпталатыны», жинақтау ретін басқаратын нәрсе және қажет болғанда элементтерді «шығару» практикалық тәсілдері туралы сөйлесетін боламыз. Стектеу мәтінмәндері туралы Веб-бетіңізді үстел ретінде елестетіңіз. HTML элементтерін қосқанда, үстелге бірінен соң бірі қағаз бөліктерін саласыз. Орналастырылған соңғы қағаз парағы ең соңғы қосылған HTML элементіне тең және ол оның алдына қойылған барлық басқа қағаздардың үстінде орналасады. Бұл тіпті кірістірілген элементтер үшін де қалыпты құжат ағыны. Жұмыс үстелінің өзі барлық басқа қалталарды қамтитын элементімен құрылған түбірлік жинақтау контекстін білдіреді. Енді арнайы CSS сипаттары іске қосылады. Орын (z-индексімен), мөлдірлік, түрлендіру және қамту сияқты сипаттар қалта сияқты әрекет етеді. Бұл қалта элементті және оның барлық еншілестерін қабылдайды, оларды негізгі стектен шығарады және оларды бөлек ішкі стекке топтастырады, осылайша біз стектік контекст деп атаймыз. Орналастырылған элементтер үшін бұл auto мәнінен басқа z-индекс мәнін жариялағанда орын алады. Мөлдірлік, түрлендіру және сүзгі сияқты сипаттар үшін арнайы мәндер қолданылған кезде жинақтау мәтінмәні автоматты түрде жасалады.
Мынаны түсінуге тырысыңыз: Қағаз парағы (яғни, еншілес элемент) қалтаның ішінде болған кезде (яғни, ата-ананың жинақтау контексті), ол ешқашан сол қалтадан шыға алмайды немесе басқа қалтадағы қағаздардың арасында орналаса алмайды. Оның z-индексі енді тек өз қалтасына қатысты.
Төмендегі суретте B қағазы енді В қалтасының жинақтау контекстінде және оны тек қалтадағы басқа қағаздармен бірге тапсырыс беруге болады.
Қаласаңыз, үстеліңізде екі қалта бар деп елестетіп көріңіз:
.қалта-a { z-индекс: 1; } .folder-b {z-индекс: 2; }
Белгілеуді сәл жаңартайық. А қалтасының ішінде арнайы бет бар, z-индекс: 9999. В қалтасының ішінде қарапайым бет, z-индекс: 5.
.арнайы бет { z-индекс: 9999; } .plain-page {z-индекс: 5; }
Қай бет жоғарғы жағында? Бұл В қалтасындағы .plain-page. Браузер еншілес қағаздарды елемейді және алдымен екі қалтаны жинайды. Ол B қалтасын (z-индекс: 2) көреді және оны А қалтасының үстіне орналастырады (z-индекс: 1), өйткені біз екінің бірден үлкен екенін білеміз. Сонымен қатар, .special-page z-index: 9999 параметріне орнатылған бет оның z-индексі мүмкін болатын ең жоғары мәнге орнатылғанына қарамастан, стектің төменгі жағында болады. Стектік контексттерді «отбасылық ағаш» жасай отырып, кірістіруге де болады (қалталар ішіндегі қалталар). Дәл осындай принцип қолданылады: бала ешқашан ата-анасының папкасынан құтыла алмайды. Стектеу контексттерінің қабаттарды топтастыру және ретін өзгерту қалталар сияқты әрекетін білгеннен кейін мынаны сұраған жөн: түрлендіру және мөлдірлік сияқты белгілі бір сипаттар неліктен жаңа жинақтау контексттерін жасайды? Мәселе мынада: бұл сипаттар сыртқы түріне байланысты жинақтау контексттерін жасамайды; олар мұны браузердің қақпақ астында қалай жұмыс істейтініне байланысты жасайды. Трансформацияны, мөлдірлікті, сүзгіні немесе перспективаны қолданғанда, сіз браузерге: «Ей, бұл элемент қозғалуы, айналуы немесе өшуі мүмкін, сондықтан дайын болыңыз!» деп айтасыз.
Осы сипаттарды пайдаланған кезде браузер көрсетуді тиімдірек басқару үшін жаңа жинақтау контекстін жасайды. Бұл браузерге анимацияларды, түрлендірулерді және көрнекі әсерлерді дербес өңдеуге мүмкіндік береді, бұл элементтердің беттің қалған бөлігімен өзара әрекеттесу жолын қайта есептеу қажеттілігін азайтады. Браузердің: «Мен бұл қалтаны бөлек өңдеймін, сондықтан оның ішіндегі бірдеңе өзгерген сайын бүкіл үстелді өзгертуге тура келмейді» деп ойлап көріңіз. Бірақ баржанама әсер. Браузер элементті өз қабатына көтергеннен кейін, ол жаңа жинақтау контекстін жасай отырып, оның ішіндегі барлығын «тегістеу» керек. Бұл бөлек өңдеу үшін үстелден қалтаны алу сияқты; сол қалтаның ішіндегі барлық нәрсе топтастырылады және браузер енді ненің үстінде не тұратынын шешкен кезде оны бір бірлік ретінде қарастырады. Сонымен, түрлендіру және мөлдірлік сипаттары элементтердің визуалды түрде жинақталу жолына әсер етпеуі мүмкін болса да, олар әсер етеді және өнімділікті оңтайландыруға арналған. Бірнеше басқа CSS сипаттары да ұқсас себептермен жинақтау контексттерін жасай алады. Егер сіз тереңірек қазғыңыз келсе, MDN толық тізімді ұсынады. Бірнешеу бар, олар байқаусызда стектік контекстті білмей жасау қаншалықты оңай екенін көрсетеді. «Шығу» мәселесі Стектеу мәселелері көптеген себептерге байланысты туындауы мүмкін, бірақ кейбіреулері басқаларға қарағанда жиі кездеседі. Модальдық құрамдас бөліктер классикалық үлгі болып табылады, өйткені олар құрамдас бөлікті барлық басқа элементтердің үстіндегі үстіңгі қабатта «ашу» үшін ауыстырып-қосуды, содан кейін «жабық» болғанда оны жоғарғы қабаттан алып тастауды қажет етеді. Мен бәрімізде модальды ашатын жағдайға тап болғанымызға сенімдімін және қандай да бір себептермен ол пайда болмайды. Бұл оның дұрыс ашылмағандығында емес, ол жинақтау контекстінің төменгі қабатында көрінбейді. Бұл сізді «қалай болды?» деген сұраққа қалдырады. орнатқаннан бері:
.overlay { орны: бекітілген; /* жинақтау контекстін жасайды */ z-индекс: 1; /* элементті бәрінен жоғары қабатқа қояды */ кірістіру: 0; ені: 100%; биіктігі: 100 В/сағ; толып кету: жасырын; фон түсі: #00000080; }
Бұл дұрыс көрінеді, бірақ модальды триггерді қамтитын негізгі элемент z-индекс: 1 мәніне орнатылған басқа негізгі элементтің ішіндегі еншілес элемент болса, бұл модальды техникалық түрде негізгі қалтамен жасырылған ішкі қабатқа орналастырады. Осы нақты сценарийді және басқа бірнеше жалпы контекстік тұзақтарды қарастырайық. Менің ойымша, сіз байқаусызда жинақтау контексттерін жасау қаншалықты оңай екенін ғана емес, сонымен қатар оларды қалай дұрыс басқаруға болатындығын көресіз. Сондай-ақ, басқарылатын күйге қалай оралуыңыз жағдайға байланысты. 1-сценарий: Қапталған модаль
Төмен деңгейлі қабатта ұсталған модальды бірден көруге және ата-ананы анықтауға болады. Браузер кеңейтімдері Смарт әзірлеушілер көмектесу үшін кеңейтімдер жасады. Осы "CSS Stacking Context Inspector" Chrome кеңейтімі сияқты құралдар жинақтау контекстін жасайтын элементтер туралы ақпаратты көрсету үшін DevTools қолданбасына қосымша z-индекс қойындысын қосады.
IDE кеңейтімдері Сіз тіпті VS Code үшін кеңейтіммен әзірлеу кезінде мәселелерді анықтай аласыз, ол әлеуетті стек контекстік мәселелерін тікелей редакторыңызда көрсетеді.
Стектен шығару және бақылауды қалпына келтіру Түбір себебін анықтағаннан кейін, келесі қадам онымен күресу болып табылады. Бұл мәселені шешудің бірнеше жолы бар, мен оларды ретімен тізімдеймін. Сіз кез келген деңгейде кез келген адамды таңдай аласыз; ешкім басқасына шағымдана алмайды немесе кедергі жасай алмайды. HTML құрылымын өзгерту Бұл оңтайлы түзету деп саналады. Стектік мәтінмән мәселесімен бетпе-бет келуіңіз үшін кейбір элементтерді HTML ішіндегі күлкілі орындарға орналастырған болуыңыз керек. Бетті қайта құрылымдау DOM пішінін өзгертуге және жинақтау контекстік мәселесін жоюға көмектеседі. Проблемалық элементті тауып, оны HTML белгілеуіндегі ұстау элементінен жойыңыз. Мысалы, біз .modal-контейнерді тақырыптан жылжытып, оны
элементіне өздігінен орналастыру арқылы «Тұзаққа салынған модаль» бірінші сценарийін шеше аламыз.Тақырып
Негізгі мазмұн
Бұл мазмұнның z-индексі 2 және модальды әлі де қамтымайды.
«Модальді ашу» түймесін басқан кезде, модаль болуы керек нәрсенің алдында орналасады. Шойомбо Габриэль Айомидтің 1-қалам сценарийін қараңыз: тұзаққа түскен модаль (шешім). реттеңізCSS-тегі ата-аналық жинақтау мәтінмәні Орналасуды бұзбай жылжыту мүмкін емес элемент болса ше? Мәселені шешкен дұрыс: ата-ана контекстті белгілейді. Мәтінмәнді іске қосуға жауапты CSS сипатын (немесе сипаттарын) тауып, оны жойыңыз. Егер оның мақсаты болса және оны жою мүмкін болмаса, бүкіл контейнерді көтеру үшін ата-анаға оның бауырлас элементтеріне қарағанда жоғарырақ z-индекс мәнін беріңіз. Жоғарырақ z-индекс мәнімен негізгі контейнер жоғарыға жылжиды және оның еншілестері пайдаланушыға жақынырақ көрінеді. «Батырылған ашылмалы тізім» сценарийінде білгендеріміздің негізінде біз ашылмалы тізімді шарлау тақтасынан жылжыта алмаймыз; мағынасы болмас еді. Дегенмен, .navbar контейнерінің z-индекс мәнін .content элементінің z-индекс мәнінен үлкенірек етіп арттыра аламыз. .navbar { фон: №333; /* z-индекс: 1; */ z-индекс: 3; позиция: салыстырмалы; }
Осы өзгерту арқылы .ашылмалы мәзір енді мазмұнның алдында ешбір ақаусыз пайда болады. 2-қалам сценарийін қараңыз: Шойомбо Габриэль Айомиде жазған су астындағы ашылмалы тізім (шешім). Framework пайдаланылса, порталдарды қолданып көріңіз React немесе Vue сияқты фреймворктерде Портал компонентті DOM ішіндегі қалыпты тектік иерархиясынан тыс көрсетуге мүмкіндік беретін мүмкіндік болып табылады. Порталдар компоненттеріңізге арналған телепортация құрылғысы сияқты. Олар құрамдас HTML-ді құжаттың кез келген жерінде (әдетте тікелей document.body ішіне) көрсетуге мүмкіндік береді, сонымен бірге оны деректемелер, күй және оқиғалар үшін бастапқы ата-анасымен логикалық түрде байланыстырады. Бұл жинақтау контекстік тұзақтардан құтылу үшін өте қолайлы, себебі көрсетілген нәтиже сөзбе-сөз проблемалық негізгі контейнерден тыс пайда болады. ReactDOM.createPortal( <Кеңес />, құжат.дене );
Бұл ата-анада толып кету: жасырын немесе төменірек z индексі болса да, ашылмалы мазмұнның ата-анасының артында жасырылмауын қамтамасыз етеді. Біз бұрын қарастырған «Қысқартылған құралдар кеңесі» сценарийінде мен құралдар кеңесін толып кетуден құтқару үшін Порталды пайдаландым: жасырын клипті құжаттың негізгі бөлігіне орналастыру және оны контейнердегі триггердің үстіне орналастыру арқылы. 3-қалам сценарийін қараңыз: Шойомбо Габриэль Айомидтің қиылған құралдар кеңесі (шешім). Жанама әсерлерсіз жинақтау контекстімен таныстыру Алдыңғы бөлімде түсіндірілген барлық тәсілдер проблемалық стектік контексттерден элементтерді «шығаруға» бағытталған, бірақ стектеу контекстін шынымен қажет ететін немесе жасағыңыз келетін кейбір жағдайлар бар. Жаңа жинақтау контекстін жасау оңай, бірақ барлық тәсілдердің жанама әсері бар. Яғни, оқшаулауды пайдалануды қоспағанда: оқшаулау. Элементке қолданылғанда, сол элемент еншілестерінің жинақтау мәтінмәні оның сыртындағы элементтердің әсерінен емес, әрбір еншілеске қатысты және сол контекст ішінде анықталады. Классикалық мысал сол элементке теріс мәнді тағайындау болып табылады, мысалы, z-индекс: -1. Сізде .card компоненті бар деп елестетіңіз. Сіз .card мәтінінің артында, бірақ карта фонының жоғарғы жағында орналасқан сәндік пішінді қосқыңыз келеді. Картада жинақтау контекстінсіз, z-индекс: -1 пішінді түбірлік жинақтау контекстінің (бүкіл бет) төменгі жағына жібереді. Бұл оны .card ақ фонының артында жоғалады: Шойомбо Габриэль Айомиде жазған Қалам теріс z-индексін (мәселе) қараңыз. Мұны шешу үшін біз оқшаулауды жариялаймыз: ата-аналық картада isolate: Шойомбо Габриэль Айомиде жазған Қалам теріс z-индексін (шешім) қараңыз. Енді .card элементінің өзі жинақтау контекстіне айналады. Оның еншілес элементі — :before псевдоэлементінде жасалған сәндік пішін — z-индекске ие болғанда: -1, ол ата-ананың жинақтау контекстінің ең төменгі жағына өтеді. Ол мақсатқа сай мәтіннің артында және картаның фонында өте жақсы орналасқан. Қорытынды Есіңізде болсын: келесі жолы z-индексіңіз бақылаудан тыс болып көрінгенде, бұл жинақталған жинақтау контексті. Анықтамалар
Стектеу контексті (MDN) Z-индекс және стек контексттері (web.dev) «CSS-те оқшаулау қасиетімен жаңа жинақтау контекстін қалай жасауға болады», Натали Пина Джош Комо: «Не, z-индекс?»
SmashingMag туралы қосымша оқу
«Үлкен жобаларда CSS Z-индексін басқару», Стивен Фрисон «Жабысқақ тақырыптар және толық биіктік элементтері: күрделі комбинация», Филип Браунен «Компоненттік веб-қосымшада Z-индексін басқару», Павел Померанцев «Z-index CSS қасиеті: жан-жақты көрініс», Луи Лазарис
