Дали некогаш сте поставиле z-индекс: 99999 на елемент во вашиот CSS, а тој не излегува на врвот на другите елементи? Толку голема вредност треба лесно да го постави тој елемент визуелно над што било друго, под претпоставка дека сите различни елементи се поставени или на помала вредност или воопшто не се поставени. Веб-страницата обично е претставена во дводимензионален простор; сепак, со примена на специфични својства на CSS, се воведува имагинарна рамнина на оската z за да се пренесе длабочина. Оваа рамнина е нормална на екранот и од неа корисникот го согледува редот на елементите, еден врз друг. Идејата зад имагинарната z-оска, перцепцијата на корисникот за наредените елементи, е дека својствата на CSS што ја создаваат се комбинираат за да формираат она што го нарекуваме контекст на редење. Ќе зборуваме за тоа како елементите се „наредени“ на веб-страница, што го контролира редоследот на редење и практични пристапи за „откачување“ елементи кога е потребно. За редење контексти Замислете ја вашата веб-страница како биро. Додека додавате HTML елементи, ставате парчиња хартија, едно по друго, на работната маса. Последното ставено парче хартија е еквивалентно на неодамна додадениот HTML елемент и се наоѓа на врвот на сите други хартии поставени пред него. Ова е нормален тек на документи, дури и за вгнездени елементи. Самата работна маса го претставува контекстот за редење на root, формиран од елементот , кој ги содржи сите други папки. Сега, специфичните својства на CSS влегуваат во игра. Својствата како позиција (со z-индекс), непроѕирност, трансформација и содржат) делуваат како папка. Оваа папка зема елемент и сите негови деца, ги извлекува од главниот стек и ги групира во посебен под-оџак, создавајќи го она што ние го нарекуваме контекст на редење. За позиционирани елементи, ова се случува кога ќе декларираме вредност на z-индекс различна од автоматско. За својства како непроѕирност, трансформација и филтер, контекстот на редење се создава автоматски кога се применуваат одредени вредности.
Обидете се да го разберете ова: штом парче хартија (т.е. дете елемент) ќе се најде во папка (т.е., контекстот на редење на родителот), никогаш не може да излезе од таа папка или да се стави помеѓу хартии во друга папка. Неговиот z-индекс сега е релевантен само во неговата сопствена папка.
На илустрацијата подолу, хартијата Б сега е во контекст на редење на папката Б и може да се нарача само со други хартии во папката.
Замислете, ако сакате, дека имате две папки на вашата маса:
.папка-а { z-индекс: 1; } .папка-б { z-индекс: 2; }
Ајде малку да го ажурираме обележувањето. Внатре во папката А е посебна страница, z-index: 9999. Внатре во папката B е обична страница, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Која страница е на врвот? Тоа е .plain-страница во папката Б. Прелистувачот ги игнорира детските хартии и прво ги собира двете папки. Ја гледа папката B (z-индекс: 2) и ја става на врвот на папката A (z-индекс: 1) бидејќи знаеме дека два е поголема од една. Во меѓувреме, страницата .special-page поставена на z-index: 9999 страница се наоѓа на дното на магацинот иако нејзиниот z-индекс е поставен на највисоката можна вредност. Контекстите за редење, исто така, може да се вгнездуваат (папки во папките), создавајќи „семејно стебло“. Се применува истиот принцип: детето никогаш не може да избега од папката на своите родители. Сега кога сфативте како контекстите со редење се однесуваат како папки што ги групираат и прередуваат слоевите, вреди да се прашаме: зошто одредени својства - како трансформација и непроѕирност - создаваат нови контексти за редење? Еве ја работата: овие својства не создаваат контексти за натрупување поради тоа како изгледаат; тие го прават тоа поради тоа како работи прелистувачот под капакот. Кога применувате трансформација, непроѕирност, филтер или перспектива, му велите на прелистувачот: „Еј, овој елемент може да се движи, ротира или избледи, затоа бидете подготвени!
Кога ги користите овие својства, прелистувачот создава нов контекст на редење за поефикасно да управува со прикажувањето. Ова му овозможува на прелистувачот самостојно да ракува со анимации, трансформации и визуелни ефекти, намалувајќи ја потребата за повторно пресметување како овие елементи комуницираат со остатокот од страницата. Сфатете го тоа како прелистувачот кој вели: „Ќе ракувам со оваа папка одделно, за да не морам да го менувам целото биро секогаш кога нешто ќе се промени во него“. Но иманесакан ефект. Откако прелистувачот ќе подигне елемент во својот слој, тој мора да „израмни“ сè во него, создавајќи нов контекст на редење. Тоа е како да извадите папка од работната маса за да ја ракувате одделно; сè што е внатре во таа папка се групира, а прелистувачот сега го третира како единствена единица кога одлучува што седи над што. Така, иако својствата на трансформацијата и непроѕирноста можеби нема да влијаат на начинот на кој елементите визуелно се редат, тие го прават тоа, и тоа е за оптимизација на перформансите. Неколку други својства на CSS, исто така, можат да создадат контексти за редење од слични причини. MDN обезбедува комплетна листа ако сакате да копате подлабоко. Има неколку, што само илустрира колку е лесно ненамерно да се создаде контекст на натрупување без да се знае. Проблемот со „расклопување“. Проблемите со редење може да настанат поради многу причини, но некои се почести од другите. Модалните компоненти се класичен образец затоа што бараат да се „отвори“ компонентата на горниот слој над сите други елементи, а потоа да се отстрани од горниот слој кога е „затворен“. Прилично сум уверен дека сите наидовме во ситуација кога отвораме модал и, од која било причина, не се појавува. Не е дека не се отвори правилно, туку дека е надвор од видот во долниот слој на контекстот на редење. Ова ве остава да се запрашате "како тоа?" откако сте поставиле:
.преклоп { позиција: фиксна; /* создава контекст на редење */ z-индекс: 1; /* го става елементот на слој над сè друго */ вметнување: 0; ширина: 100%; висина: 100vh; претекување: скриено; боја на позадина: #00000080; }
Ова изгледа точно, но ако матичниот елемент што го содржи модалниот активирач е дете елемент во друг родителски елемент кој исто така е поставен на z-индекс: 1, тоа технички го става модалот во подслој заматен од главната папка. Ајде да го погледнеме тоа специфично сценарио и неколку други вообичаени стапици во контекст на редење. Мислам дека ќе видите не само колку е лесно ненамерно да се креираат контексти за натрупување, туку и како погрешно да се управуваат со нив. Исто така, како ќе се вратите во управувана состојба зависи од ситуацијата. Сценарио 1: Модалот заробен
Можете веднаш да го видите вашиот модал заробен во слој на ниско ниво и да го идентификувате родителот. Екстензии на прелистувачот Паметните програмери имаат изградено екстензии за да помогнат. Алатките како оваа екстензија на Chrome „CSS Stacking Context Inspector“ додаваат дополнителен таб со z-индекс на вашите DevTools за да ви прикажат информации за елементите што создаваат контекст на редење.
IDE екстензии Можете дури и да забележите проблеми за време на развојот со екстензија како оваа за VS Code, која ги истакнува потенцијалните проблеми со контекстот на редење директно во вашиот уредник.
Отстранување и враќање на контролата Откако ќе ја идентификуваме основната причина, следниот чекор е да се справиме со неа. Постојат неколку пристапи што можете да ги преземете за да се справите со овој проблем, а јас ќе ги наведам по редослед. Сепак, можете да изберете кој било на кое било ниво; никој не може да се жали или попречува друг. Променете ја структурата на HTML Ова се смета за оптимално решение. За да наидете на проблем со контекстот на редење, мора да сте поставиле некои елементи на смешни позиции во вашиот HTML. Реструктуирањето на страницата ќе ви помогне да го преобликувате DOM-от и да го елиминирате проблемот со контекстот со редење. Најдете го проблематичниот елемент и отстранете го од елементот за заробување во ознаката HTML. На пример, можеме да го решиме првото сценарио, „Заробениот модал“, со поместување на .modal-контејнерот надвор од заглавието и ставање во елементот
сам по себе.Оваа содржина има z-индекс од 2 и сè уште нема да го покрие модалниот.Заглавие
Главна содржина
Кога ќе кликнете на копчето „Отвори модал“, модалот се позиционира пред сè друго како што треба да биде. Видете го сценариото за пенкало 1: Заробениот модал (решение) [заглавен] од Шојомбо Габриел Ајомид. Прилагодете гоРодителско редење контекст во 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. Сакате да додадете украсна форма што се наоѓа зад текстот на .картичката, но на врвот на позадината на картичката. Без контекст на редење на картичката, z-index: -1 ја испраќа формата до дното на контекстот за редење на коренот (целата страница). Ова го прави да исчезне зад белата позадина на .картичката: Видете го Негативниот z-индекс на пенкало (проблемот) [заглавен] од Шојомбо Габриел Ајомид. За да го решиме ова, прогласуваме изолација: isolate на матичната .card: Видете го Pen Negative z-index (решение) [чаталено] од Шојомбо Габриел Ајомид. Сега, самиот елемент .card станува контекст на редење. Кога неговиот детски елемент - украсната форма создадена на псевдоелементот :before - има z-индекс: -1, тој оди до самиот крај на контекстот за редење на родителот. Совршено се наоѓа зад текстот и на врвот на позадината на картичката, како што е предвидено. Заклучок Запомнете: следниот пат кога вашиот z-индекс ќе изгледа надвор од контрола, тоа е заробен контекст на натрупување. Референци
Контекст на редење (MDN) Z-индекс и контексти за редење (web.dev) „Како да се создаде нов контекст на редење со особина за изолација во CSS“, Натали Пина „What The Heck, z-index??“, Џош Комо
Дополнително читање на SmashingMag
„Управување со CSS Z-Index во големи проекти“, Стивен Фрисон „Лепливи заглавија и елементи со целосна висина: незгодна комбинација“, Филип Браунен „Управување со Z-индекс во веб-апликација базирана на компоненти“, Павел Померанцев „Својството на Z-Index CSS: сеопфатен изглед“, Луис Лазарис
