Да ли сте икада поставили з-индек: 99999 на елемент у свом ЦСС-у, а он се не појављује изнад других елемената? Овако велика вредност требало би лако да постави тај елемент визуелно изнад било чега другог, под претпоставком да су сви различити елементи постављени на нижу вредност или уопште нису постављени. Веб страница је обично представљена у дводимензионалном простору; међутим, применом специфичних ЦСС својстава, уводи се замишљена раван з-осе да би се пренела дубина. Ова раван је окомита на екран и из ње корисник перципира редослед елемената, један на другом. Идеја која стоји иза имагинарне з-осе, корисничке перцепције наслаганих елемената, је да се својства ЦСС-а која га креирају комбинују да би формирали оно што називамо контекстом слагања. Говорићемо о томе како су елементи „слагани“ на веб страници, шта контролише редослед слагања и практични приступ „расклапању“ елемената када је то потребно. О слагању контекста Замислите своју веб страницу као сто. Док додајете ХТМЛ елементе, полажете комаде папира, један за другим, на сто. Последњи постављени комад папира је еквивалентан последњем додатом ХТМЛ елементу и налази се изнад свих осталих папира који се налазе пре њега. Ово је нормалан ток документа, чак и за угнежђене елементе. Сам сто представља основни контекст слагања, формиран од <хтмл> елемента, који садржи све остале фасцикле. Сада у игру ступају одређена својства ЦСС-а. Својства као што су позиција (са з-индексом), непрозирност, трансформација и садржај) делују као фасцикла. Ова фасцикла узима елемент и сву његову децу, издваја их из главног стека и групише их у посебан подстек, стварајући оно што називамо контекстом слагања. За позициониране елементе, ово се дешава када декларишемо вредност з-индекса која није ауто. За својства као што су непрозирност, трансформација и филтер, контекст слагања се креира аутоматски када се примењују одређене вредности.
Покушајте да разумете ово: када се комад папира (тј. подређени елемент) нађе унутар фасцикле (тј. родитељског контекста слагања), никада не може изаћи из те фасцикле или бити смештен између папира у другој фасцикли. Његов з-индекс је сада релевантан само унутар сопствене фасцикле.
На илустрацији испод, папир Б је сада унутар контекста слагања фасцикле Б и може се наручити само са другим папирима у фасцикли.
Замислите, ако хоћете, да имате два фолдера на свом столу: <див цласс="фолдер-а">Фолдер А <див цласс="фолдер-б">Фолдер Б
.фолдер-а { з-индек: 1; } .фолдер-б { з-индек: 2; }
Хајде да мало ажурирамо ознаке. Унутрашња фасцикла А је посебна страница, з-индекс: 9999. Унутрашња фасцикла Б је обична страница, з-индекс: 5. <див цласс="фолдер-а"> <див цласс="специал-паге">Посебна страница
<див цласс="фолдер-б"> <див цласс="плаин-паге">Обична страница
.специал-паге { з-индек: 9999; } .плаин-паге { з-индек: 5; }
Која је страница на врху? То је .плаин-паге у фасцикли Б. Прегледач игнорише подређене папире и прво слаже две фасцикле. Он види фасциклу Б (з-индекс: 2) и поставља је на врх фасцикле А (з-индекс: 1) јер знамо да је два веће од један. У међувремену, страница .специал-паге постављена на з-индек: 9999 страница је на дну стека иако је њен з-индекс постављен на највишу могућу вредност. Контексти за слагање такође могу бити угнежђени (фасцикле унутар фасцикли), стварајући „породично стабло“. Примењује се исти принцип: дете никада не може побећи из фасцикле својих родитеља. Сада када сте схватили како се контексти слагања понашају као фасцикле које групишу и мењају редослед слојева, вреди се запитати: зашто одређена својства — попут трансформације и непрозирности — стварају нове контексте за слагање? Ево у чему је ствар: ова својства не стварају контексте слагања због тога како изгледају; они то раде због начина на који претраживач ради испод хаубе. Када примените трансформацију, непрозирност, филтер или перспективу, говорите претраживачу: „Хеј, овај елемент може да се помери, ротира или избледи, зато будите спремни!“
Када користите ова својства, прегледач креира нови контекст слагања да би ефикасније управљао приказивањем. Ово омогућава претраживачу да самостално рукује анимацијама, трансформацијама и визуелним ефектима, смањујући потребу за поновним израчунавањем начина на који ови елементи ступају у интеракцију са остатком странице. Замислите то као што претраживач каже: „Овом фасциклу ћу руковати одвојено, тако да не морам да мењам цео сто сваки пут када се нешто у њему промени.“ Али постојинежељени ефекат. Када прегледач подигне елемент у сопствени слој, он мора да „изравна“ све унутар њега, стварајући нови контекст слагања. То је као да скинете фасциклу са стола да бисте је одвојено руковали; све унутар те фасцикле се групише, а претраживач сада то третира као једну целину када одлучује шта се налази изнад чега. Дакле, иако се чини да својства трансформације и непрозирности не утичу на начин на који се елементи визуелно слажу, они то чине, и то за оптимизацију перформанси. Неколико других ЦСС својстава такође могу креирати контексте слагања из сличних разлога. МДН пружа комплетну листу ако желите да копате дубље. Има их доста, што само илуструје колико је лако ненамерно створити контекст слагања без знања. Проблем "расклапања". Проблеми са слагањем могу се појавити из много разлога, али неки су чешћи од других. Модалне компоненте су класичан образац јер захтевају пребацивање компоненте да би се „отворила“ на горњем слоју изнад свих осталих елемената, а затим је уклонила из горњег слоја када је „затворена“. Прилично сам уверен да смо сви наишли на ситуацију да отворимо модал и, из било ког разлога, он се не појављује. Није да се није отворио како треба, већ да је ван видокруга у доњем слоју контекста слагања. Ово вас оставља да се запитате "како то?" пошто сте поставили:
.оверлаи { позиција: фиксна; /* креира контекст слагања */ з-индекс: 1; /* ставља елемент на слој изнад свега осталог */ уметак: 0; ширина: 100%; висина: 100вх; преливање: скривено; бацкгроунд-цолор: #00000080; }
Ово изгледа исправно, али ако је родитељски елемент који садржи модални окидач подређени елемент унутар другог надређеног елемента који је такође постављен на з-индекс: 1, то технички поставља модални елемент у подслој заклоњен главном фасциклом. Погледајмо тај специфичан сценарио и неколико других уобичајених замки контекста слагања. Мислим да ћете видети не само колико је лако ненамерно створити контексте за слагање, већ и како их погрешно управљати. Такође, начин на који се враћате у управљано стање зависи од ситуације. Сценарио 1: Заробљени модал
Можете одмах видети свој модал заробљен у слоју ниског нивоа и идентификовати родитеља. Бровсер Ектенсионс Паметни програмери су направили екстензије за помоћ. Алати попут овог „ЦСС Стацкинг Цонтект Инспецтор“ проширења за Цхроме додају додатну з-индекс картицу вашим ДевТоолс-има како би вам приказали информације о елементима који креирају контекст слагања.
ИДЕ Ектенсионс Можете чак и уочити проблеме током развоја са екстензијом попут ове за ВС Цоде, која истиче потенцијалне проблеме са контекстом слагања директно у вашем уређивачу.
Расклапање и враћање контроле Након што смо идентификовали основни узрок, следећи корак је да се позабавимо њиме. Постоји неколико приступа које можете предузети да бисте решили овај проблем, а ја ћу их навести редом. Међутим, можете изабрати било кога на било ком нивоу; нико се не може жалити или ометати другог. Промените ХТМЛ структуру Ово се сматра оптималним решењем. Да бисте наишли на проблем контекста слагања, морате поставити неке елементе на смешне позиције унутар вашег ХТМЛ-а. Реструктурирање странице ће вам помоћи да преобликујете ДОМ и елиминишете проблем контекста слагања. Пронађите проблематични елемент и уклоните га из елемента за заробљавање у ХТМЛ ознакама. На пример, можемо решити први сценарио, „Заробљени модал“, тако што ћемо померити .модал-цонтаинер из заглавља и ставити га у елемент <боди> самог.
<хеадер цласс="хеадер"> <х2>Заглавље <буттон ид="опен-модал">Отвори модал <маин цласс="цонтент"> <х1>Главни садржај <п>Овај садржај има з-индекс 2 и још увек неће покривати модални.
<див ид="модал-цонтаинер" цласс="модал-цонтаинер"> <див цласс="модал-оверлаи"> <див цласс="модал-цонтент"> <х3>Модал Наслов <п>Сада не стојим иза ничега. Добио сам бољу позицију као резултат реструктурирања ДОМ-а. <буттон ид="цлосе-модал">Затвори
Када кликнете на дугме „Отвори модал“, модал се поставља испред свега осталог како би требало да буде. Погледајте сценарио за оловку 1: Заробљени модал (решење) [рачвано] аутора Шојомбоа Габријела Ајомида. Подесите ТхеКонтекст родитељског слагања у ЦСС-у Шта ако је елемент онај који не можете да померите а да не нарушите распоред? Боље је позабавити се проблемом: родитељ успоставља контекст. Пронађите ЦСС својство (или својства) одговорно за покретање контекста и уклоните га. Ако има сврху и не може се уклонити, дајте родитељу вишу вредност з-индекса од његових сродних елемената да подигне цео контејнер. Са вишом вредношћу з-индекса, родитељски контејнер се помера на врх, а његови потомци се појављују ближе кориснику. На основу онога што смо научили у сценарију „Потопљени падајући мени“, не можемо да померимо падајући мени из навигационе траке; не би имало смисла. Међутим, можемо повећати вредност з-индекса контејнера .навбар да буде већа од вредности з-индекса елемента .цонтент. .навбар { позадина: #333; /* з-индекс: 1; */ з-индекс: 3; положај: релативан; }
Са овом променом, .падајући мени се сада појављује испред садржаја без икаквих проблема. Погледајте сценарио за оловку 2: Потопљени падајући мени (решење) [рачвано] аутора Шојомбоа Габријела Ајомида. Испробајте портале, ако користите оквир У оквирима као што су Реацт или Вуе, Портал је функција која вам омогућава да прикажете компоненту ван њене нормалне родитељске хијерархије у ДОМ-у. Портали су попут уређаја за телепортацију за ваше компоненте. Они вам омогућавају да прикажете ХТМЛ компоненте било где у документу (обично директно у доцумент.боди) док је логички повезан са оригиналним родитељем за прописе, стање и догађаје. Ово је савршено за избегавање замки контекста слагања пошто се рендеровани излаз буквално појављује изван проблематичног родитељског контејнера. РеацтДОМ.цреатеПортал( <ТоолТип />, документ.тело );
Ово осигурава да ваш садржај падајућег менија није сакривен иза свог надређеног, чак и ако родитељ има преливање: скривено или нижи з-индекс. У сценарију „Осечени опис алата“ који смо раније погледали, користио сам Портал да спасем опис алата од преливања: скривеног клипа тако што сам га поставио у тело документа и поставио изнад окидача унутар контејнера. Погледајте сценарио за оловку 3: Исечени алат (решење) [рачвано] од Шојомбоа Габријела Ајомида. Представљамо контекст слагања без нежељених ефеката Сви приступи објашњени у претходном одељку имају за циљ „разлагање“ елемената из проблематичних контекста слагања, али постоје неке ситуације у којима ћете заиста требати или желите да креирате контекст слагања. Креирање новог контекста за слагање је лако, али сви приступи имају споредни ефекат. То јест, осим коришћења изолације: изоловати. Када се примени на елемент, контекст слагања деце тог елемента се одређује у односу на свако дете и унутар тог контекста, уместо да на њега утичу елементи изван њега. Класичан пример је да се том елементу додели негативна вредност, као што је з-индекс: -1. Замислите да имате компоненту .цард. Желите да додате украсни облик који се налази иза текста картице, али на врху позадине картице. Без контекста слагања на картици, з-индекс: -1 шаље облик на дно основног контекста слагања (цела страница). Због тога нестаје иза беле позадине .цард картице: Погледајте Пен Негативе з-индекс (проблем) [форкед] Схоиомбо Габриел Аиомиде. Да бисмо ово решили, проглашавамо изолацију: исолате на родитељској .цард картици: Погледајте Пен Негативе з-индек (решење) [рачвано] од Схоиомбо Габриел Аиомиде. Сада, сам елемент .цард постаје контекст слагања. Када његов подређени елемент — декоративни облик креиран на :бефоре псеудоелементу — има з-индекс: -1, он иде на само дно родитељског контекста слагања. Савршено се налази иза текста и на врху позадине картице, како је предвиђено. Закључак Запамтите: следећи пут када се ваш з-индек чини ван контроле, то је заробљени контекст слагања. Референце
Контекст слагања (МДН) З-индекс и контексти слагања (веб.дев) „Како направити нови контекст слагања са својством изолације у ЦСС-у“, Наталие Пина „Вхат Тхе Хецк, з-индек?“, Јосх Цомеау
Даље читање на СмасхингМаг
„Управљање ЦСС З-индексом у великим пројектима“, Стевен Фриесон „Лепљива заглавља и елементи пуне висине: незгодна комбинација“, Филип Браунен „Управљање З-индексом у веб апликацији заснованој на компонентама“, Павел Померантсев „З-индекс ЦСС својство: свеобухватан изглед“, Лоуис Лазарис
