Вы калі-небудзь усталёўвалі z-index: 99999 для элемента ў вашым CSS, і ён не выходзіць паверх іншых элементаў? Такое вялікае значэнне павінна лёгка размясціць гэты элемент візуальна па-над чым-небудзь яшчэ, пры ўмове, што для ўсіх розных элементаў устаноўлена меншае значэнне або не ўстаноўлена ўвогуле. Вэб-старонка звычайна прадстаўлена ў двухмернай прасторы; аднак, ужываючы пэўныя ўласцівасці CSS, для перадачы глыбіні ўводзіцца ўяўная плоскасць восі z. Гэтая плоскасць перпендыкулярная экрану, і з яе карыстальнік бачыць парадак элементаў, размешчаных адзін на адным. Ідэя ўяўнай восі z, успрыманне карыстальнікам стэкавых элементаў, заключаецца ў тым, што ўласцівасці CSS, якія яе ствараюць, аб'ядноўваюцца ў тое, што мы называем кантэкстам стэкавання. Мы збіраемся пагаварыць пра тое, як элементы "складваюцца" на вэб-старонцы, што кантралюе парадак размяшчэння, і практычныя падыходы да "раскладання" элементаў, калі гэта неабходна. Аб кантэкстах стэкавання Уявіце сваю вэб-старонку як працоўны стол. Калі вы дадаеце элементы HTML, вы кладзеце паперы адзін за адным на стол. Апошні аркуш паперы эквівалентны апошняму дададзенаму элементу HTML і знаходзіцца паверх усіх астатніх папер, размешчаных перад ім. Гэта нармальны паток дакументаў, нават для ўкладзеных элементаў. Сам працоўны стол уяўляе каранёвы кантэкст стэкавання, утвораны элементам , які змяшчае ўсе астатнія папкі. Цяпер у гульню ўступаюць пэўныя ўласцівасці CSS. Такія ўласцівасці, як пазіцыя (з z-індэксам), непразрыстасць, трансфармацыя і ўтрыманне), дзейнічаюць як папка. Гэтая папка бярэ элемент і ўсіх яго даччыных элементаў, здабывае іх з асноўнага стэка і групуе ў асобны падстэк, ствараючы тое, што мы называем кантэкстам стэка. Для пазіцыянаваных элементаў гэта адбываецца, калі мы аб'яўляем значэнне z-індэкса, адрознае ад auto. Для такіх уласцівасцей, як непразрыстасць, пераўтварэнне і фільтр, кантэкст стэкавання ствараецца аўтаматычна пры прымяненні пэўных значэнняў.
Паспрабуйце зразумець наступнае: калі лісток паперы (г.зн. даччыны элемент) апынуўся ўнутры папкі (г.зн. кантэксту бацькоўскага стэкавання), ён ніколі не можа выйсці з гэтай папкі або быць змешчаны паміж паперамі ў іншай папцы. Яго z-індэкс цяпер актуальны толькі ў яго ўласнай тэчцы.
На ілюстрацыі ніжэй папера B цяпер знаходзіцца ў кантэксце складання папкі B, і яе можна заказаць толькі з іншымі паперамі ў папцы.
Калі хочаце, уявіце сабе, што на вашым стале дзве тэчкі:
.folder-a {z-індэкс: 1; } .folder-b {z-індэкс: 2; }
Давайце крыху абновім разметку. Унутры папкі A — спецыяльная старонка, z-індэкс: 9999. Унутры папкі B — звычайная старонка, z-індэкс: 5.
.спецыяльная старонка {z-індэкс: 9999; } .plain-старонка {z-індэкс: 5; }
Якая старонка зверху? Гэта .plain-старонка ў тэчцы B. Браўзер ігнаруе даччыныя дакументы і складвае спачатку дзве папкі. Ён бачыць папку B (z-індэкс: 2) і змяшчае яе па-над папкай A (z-індэкс: 1), таму што мы ведаем, што два больш, чым адзін. Між тым, старонка .special-page, усталяваная ў z-index: 9999, знаходзіцца ўнізе стэка, нават калі для яе z-index усталявана максімальна магчымае значэнне. Кантэксты стэкавання таксама могуць быць укладзенымі (папкі ўнутры тэчак), ствараючы «генеалагічнае дрэва». Дзейнічае той жа прынцып: дзіця ніколі не можа пазбегнуць папкі бацькоў. Цяпер, калі вы разумееце, як кантэксты стэкавання паводзяць сябе як папкі, якія групуюць і змяняюць парадак слаёў, варта спытаць: чаму пэўныя ўласцівасці — напрыклад, трансфармацыя і непразрыстасць — ствараюць новыя кантэксты стэкавання? Вось у чым справа: гэтыя ўласцівасці не ствараюць кантэксты стэкавання з-за таго, як яны выглядаюць; яны робяць гэта з-за таго, як браўзер працуе пад капотам. Калі вы ўжываеце трансфармацыю, непразрыстасць, фільтр або перспектыву, вы кажаце браўзеру: «Гэй, гэты элемент можа рухацца, паварочвацца або знікаць, таму будзьце гатовыя!»
Калі вы выкарыстоўваеце гэтыя ўласцівасці, браўзер стварае новы кантэкст стэкавання для больш эфектыўнага кіравання візуалізацыяй. Гэта дазваляе браўзеру самастойна апрацоўваць анімацыю, пераўтварэнні і візуальныя эфекты, памяншаючы неабходнасць пераразліку таго, як гэтыя элементы ўзаемадзейнічаюць з астатняй часткай старонкі. Думайце пра гэта як пра тое, што браўзер кажа: «Я буду апрацоўваць гэтую папку асобна, каб мне не прыйшлося перастаўляць увесь стол кожны раз, калі нешта ўнутры яго мяняецца». Але ёсцьпабочны эфект. Пасля таго, як браўзер падымае элемент на яго ўласны пласт, ён павінен «згладзіць» усё ў ім, ствараючы новы кантэкст стэкавання. Гэта як узяць папку са стала, каб апрацаваць яе асобна; усё ўнутры гэтай папкі групуецца, і браўзер цяпер разглядае гэта як адзінае цэлае, калі вырашае, што знаходзіцца па-над чым. Такім чынам, хаця ўласцівасці пераўтварэння і непразрыстасці могуць не ўплываць на тое, як візуальна складваюцца элементы, яны ўплываюць, і гэта для аптымізацыі прадукцыйнасці. Некаторыя іншыя ўласцівасці CSS таксама могуць ствараць кантэксты стэкавання па падобных прычынах. MDN прапануе поўны спіс, калі вы хочаце паглыбіцца. Іх даволі шмат, што толькі паказвае, наколькі лёгка ненаўмысна стварыць кантэкст стэкавання, не ведаючы пра гэта. Праблема «Раскладання». Праблемы з кладкай могуць узнікнуць па многіх прычынах, але некаторыя сустракаюцца часцей, чым іншыя. Мадальныя кампаненты з'яўляюцца класічным шаблонам, таму што яны патрабуюць пераключэння кампанента ў «адкрыты» верхні пласт над усімі іншымі элементамі, а затым выдалення яго з верхняга пласта, калі ён «зачынены». Я цалкам упэўнены, што кожны з нас сутыкаўся з сітуацыяй, калі мы адкрываем мадальнае паведамленне, але па якой-небудзь прычыне яно не з'яўляецца. Справа не ў тым, што ён не адчыніўся належным чынам, а ў тым, што ён знаходзіцца па-за полем зроку ў ніжнім слоі кантэксту стэкавання. Гэта прымушае вас задацца пытаннем "як так?" так як вы ўсталявалі:
.overlay { становішча: нерухомае; /* стварае кантэкст стэкавання */ z-індэкс: 1; /* змяшчае элемент на пласт над усім астатнім */ урэзка: 0; шырыня: 100%; вышыня: 100vh; пераліў: схаваны; колер фону: #00000080; }
Гэта выглядае правільна, але калі бацькоўскі элемент, які змяшчае мадальны трыгер, з'яўляецца даччыным элементам у іншым бацькоўскім элеменце, які таксама мае z-індэкс: 1, гэта тэхнічна змяшчае мадальны элемент у падузровень, закрыты галоўнай папкай. Давайце паглядзім на гэты канкрэтны сцэнар і пару іншых распаўсюджаных падводных камянёў кантэксту стэкавання. Я думаю, вы ўбачыце не толькі тое, як лёгка ненаўмысна ствараць кантэксты стэкавання, але і тое, як імі дрэнна кіраваць. Акрамя таго, спосаб вяртання ў кіраваны стан залежыць ад сітуацыі. Сцэнар 1: Захоплены мадаль
Вы можаце адразу ўбачыць свой мадальны рэжым, які знаходзіцца ў пастцы нізкаўзроўневага ўзроўню, і вызначыць бацькоўскі. Пашырэнні браўзэра У дапамогу разумныя распрацоўшчыкі стварылі пашырэнні. Інструменты накшталт гэтага пашырэння Chrome «CSS Stacking Context Inspector» дадаюць дадатковую ўкладку z-індэкс у вашы DevTools, каб паказаць вам інфармацыю пра элементы, якія ствараюць кантэкст стэкавання.
Пашырэнні IDE Вы нават можаце выявіць праблемы падчас распрацоўкі з дапамогай такога пашырэння для VS Code, якое вылучае патэнцыйныя праблемы кантэксту стэкавання непасрэдна ў вашым рэдактары.
Разборка і аднаўленне кантролю Пасля таго, як мы вызначылі асноўную прычыну, наступным крокам будзе яе ліквідацыя. Ёсць некалькі падыходаў, якія можна выкарыстоўваць для вырашэння гэтай праблемы, і я пералічу іх па парадку. Аднак вы можаце выбраць каго заўгодна на любым узроўні; ніхто не можа скардзіцца або перашкаджаць іншаму. Змяніць структуру HTML Гэта лічыцца аптымальным выпраўленнем. Каб вы сутыкнуліся з праблемай кантэксту стэкавання, вы павінны размясціць некаторыя элементы ў смешных месцах у сваім HTML. Рэструктурызацыя старонкі дапаможа вам змяніць форму DOM і ліквідаваць праблему кантэксту стэкавання. Знайдзіце праблемны элемент і выдаліце яго з элемента перахопу ў разметцы HTML. Напрыклад, мы можам вырашыць першы сцэнар, «The Trapped Modal», перамясціўшы .modal-container з загалоўка і змясціўшы яго ў элемент
.Гэты змест мае z-індэкс 2 і ўсё яшчэ не ахоплівае мадальны.Загаловак
Асноўны змест
Калі вы націскаеце кнопку «Адкрыць мадальнае», мадальнае размяшчаецца перад усім астатнім, як і павінна быць. Глядзіце сцэнар пяра 1: The Trapped Modal (Solution) [форк] Шаёмба Габрыэля Аёмідэ. АдрэгулюйцеКантэкст бацькоўскага стэкавання ў CSS Што рабіць, калі гэты элемент нельга перамясціць, не парушаючы макет? Лепш вырашыць пытанне: бацька ўсталёўвае кантэкст. Знайдзіце ўласцівасць (або ўласцівасці) CSS, адказную за запуск кантэксту, і выдаліце яе. Калі ён мае прызначэнне і не можа быць выдалены, дайце бацькоўскаму элементу больш высокае значэнне z-індэксу, чым яго роднасныя элементы, каб падняць увесь кантэйнер. Пры больш высокім значэнні z-індэксу бацькоўскі кантэйнер перамяшчаецца ўверх, а яго даччыныя элементы выглядаюць бліжэй да карыстальніка. Зыходзячы з таго, што мы даведаліся ў сцэнарыі «Пагружанае выпадальнае меню», мы не можам перамясціць выпадальнае меню з панэлі навігацыі; гэта не мела б сэнсу. Аднак мы можам павялічыць значэнне z-індэксу кантэйнера .navbar, каб яно было большым, чым значэнне z-індэксу элемента .content. .navbar { фон: #333; /* z-індэкс: 1; */ z-індэкс: 3; становішча: сваяк; }
Дзякуючы гэтай змене выпадальнае меню цяпер з'яўляецца перад змесцівам без праблем.
Глядзіце сцэнар пяра 2: Пагружанае выпадальнае меню (рашэнне) [форк] Шаёмба Габрыэля Аёмідэ.
Паспрабуйце парталы, калі вы выкарыстоўваеце фрэймворк
У фрэймворках, такіх як React або Vue, партал - гэта функцыя, якая дазваляе візуалізаваць кампанент па-за яго звычайнай бацькоўскай іерархіі ў DOM. Парталы падобныя на прыладу для тэлепартацыі вашых кампанентаў. Яны дазваляюць візуалізаваць HTML кампанента ў любым месцы дакумента (звычайна прама ў document.body), захоўваючы пры гэтым лагічную сувязь з першапачатковым бацькам для рэквізітаў, стану і падзей. Гэта ідэальна падыходзіць для таго, каб пазбегнуць пастак кантэксту стэкавання, паколькі візуалізаваны вынік літаральна з'яўляецца па-за праблемным бацькоўскім кантэйнерам.
ReactDOM.createPortal(
Гэта гарантуе, што ваш выпадальны змест не будзе схаваны за бацькоўскім, нават калі ў бацькоўскага ёсць перапаўненне: схаванае або меншы z-індэкс. У сцэнарыі «Абрэзаная падказка», які мы разглядалі раней, я выкарыстаў партал, каб выратаваць падказку ад перапаўнення: схаваны кліп, размясціўшы яго ў целе дакумента і размясціўшы над трыгерам у кантэйнеры. Глядзіце сцэнар пяра 3: Абрэзаная падказка (рашэнне) [форк] ад Шаёмба Габрыэля Аёмідэ. Прадстаўляем кантэкст стэкавання без пабочных эфектаў Усе падыходы, тлумачаныя ў папярэднім раздзеле, накіраваны на «вылучэнне» элементаў з праблемных кантэкстаў стэкавання, але ёсць некаторыя сітуацыі, калі вам сапраўды трэба ці захочацца стварыць кантэкст стэкавання. Стварыць новы кантэкст стэкавання лёгка, але ўсе падыходы маюць пабочны эфект. Гэта значыць, за выключэннем выкарыстання ізаляцыі: ізаляваць. Пры ўжыванні да элемента кантэкст стэкавання даччыных элементаў гэтага элемента вызначаецца адносна кожнага даччынага элемента і ўнутры гэтага кантэксту, а не пад уплывам элементаў па-за ім. Класічны прыклад - прысваенне гэтаму элементу адмоўнага значэння, напрыклад, z-індэкс: -1. Уявіце, што ў вас ёсць кампанент .card. Вы хочаце дадаць дэкаратыўную форму, якая знаходзіцца за тэкстам .card, але паверх фону карты. Без кантэксту стэкавання на картцы z-index: -1 адпраўляе форму ў ніжнюю частку каранёвага кантэксту стэкавання (уся старонка). Гэта прымушае яго знікаць за белым фонам .card: Глядзіце адмоўны z-індэкс ручкі (праблема) [разгалінаваны] Шаёмба Габрыэля Аёмідэ. Каб вырашыць гэтую праблему, мы аб'яўляем isolate: isolate на бацькоўскай .card: Глядзіце адмоўны z-індэкс Pen (рашэнне) [форк] Шаёмба Габрыэля Аёміда. Цяпер сам элемент .card становіцца кантэкстам стэкавання. Калі яго даччыны элемент — дэкаратыўная форма, створаная на псеўдаэлеменце :before — мае z-індэкс: -1, ён пераходзіць у самы ніз кантэксту стэкавання бацькоўскага элемента. Ён ідэальна размяшчаецца за тэкстам і на фоне паштоўкі, як і задумана. Заключэнне Памятайце: у наступны раз, калі ваш z-індэкс выйдзе з-пад кантролю, гэта будзе захоплены кантэкст стэкавання. Спасылкі
Кантэкст стэкавання (MDN) Z-індэкс і кантэксты стэкавання (web.dev) «Як стварыць новы кантэкст стэкавання з уласцівасцю ізаляцыі ў CSS», Наталі Піна «Што, чорт вазьмі, z-index?», Джош Комо
Далейшае чытанне на SmashingMag
«Кіраванне Z-індэксам CSS у вялікіх праектах», Стывен Фрызан «Ліпкія загалоўкі і элементы поўнай вышыні: складаная камбінацыя», Філіп Браўнэн «Кіраванне Z-індэксам у кампанентным вэб-прыкладанні», Павел Памяранцаў «Уласцівасць Z-Index CSS: поўны погляд», Луіс Лазарыс
