Nastavili ste niekedy z-index: 99999 pre prvok vo vašom CSS a nevychádza nad ostatnými prvkami? Takáto veľká hodnota by mala jednoducho umiestniť tento prvok nad čokoľvek iné, za predpokladu, že všetky rôzne prvky sú nastavené na nižšiu hodnotu alebo nie sú nastavené vôbec. Webová stránka je zvyčajne reprezentovaná v dvojrozmernom priestore; aplikovaním špecifických vlastností CSS sa však zavádza imaginárna rovina osi z na vyjadrenie hĺbky. Táto rovina je kolmá na obrazovku a používateľ z nej vníma poradie prvkov, jeden na druhom. Myšlienkou pomyselnej osi z, používateľského vnímania naskladaných prvkov, je to, že vlastnosti CSS, ktoré ich vytvárajú, sa kombinujú a vytvárajú to, čo nazývame kontext skladania. Budeme hovoriť o tom, ako sú prvky na webovej stránke „zoskladané“, čo riadi poradie ukladania a praktické prístupy k „rozbaľovaniu“ prvkov v prípade potreby. O kontextoch stohovania Predstavte si svoju webovú stránku ako pracovný stôl. Pri pridávaní prvkov HTML ukladáte na stôl kusy papiera jeden po druhom. Posledný položený kus papiera je ekvivalentný naposledy pridanému prvku HTML a sedí na všetkých ostatných papieroch umiestnených pred ním. Toto je normálny tok dokumentov, dokonca aj pre vnorené prvky. Samotný stôl predstavuje koreňový skladovací kontext, tvorený prvkom , ktorý obsahuje všetky ostatné priečinky. Teraz vstupujú do hry špecifické vlastnosti CSS. Vlastnosti ako poloha (s indexom z), nepriehľadnosť, transformácia a obsah) fungujú ako priečinok. Tento priečinok vezme prvok a všetky jeho potomky, extrahuje ich z hlavného zásobníka a zoskupí ich do samostatného podvrstva, čím sa vytvorí to, čo nazývame kontext skladania. Pre polohované prvky sa to stane, keď deklarujeme hodnotu z-indexu inú ako auto. Pre vlastnosti ako nepriehľadnosť, transformácia a filter sa kontext skladania vytvorí automaticky, keď sa použijú konkrétne hodnoty.
Pokúste sa pochopiť toto: Akonáhle je kus papiera (t. j. podradený prvok) vo vnútri priečinka (t. j. v kontexte rodiča, nemôže tento priečinok opustiť ani byť umiestnený medzi papiermi v inom priečinku). Jeho z-index je teraz relevantný iba v jeho vlastnom priečinku.
Na obrázku nižšie je papier B teraz v rámci stohovania priečinka B a možno ho objednať len s inými papiermi v priečinku.
Predstavte si, ak chcete, že máte na stole dva priečinky:
.priecinok-a { z-index: 1; } .priecinok-b { z-index: 2; }
Trochu aktualizujme označenie. Vnútorný priečinok A je špeciálna stránka, z-index: 9999. Vnútorný priečinok B je obyčajná stránka, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Ktorá stránka je navrchu? Je to .plain-page v priečinku B. Prehliadač ignoruje podradené papiere a najprv naskladá dva priečinky. Vidí priečinok B (z-index: 2) a umiestni ho nad priečinok A (z-index: 1), pretože vieme, že dva sú väčšie ako jeden. Medzitým je stránka .special-page nastavená na z-index: 9999 na konci zásobníka, aj keď je jej z-index nastavený na najvyššiu možnú hodnotu. Kontexty stohovania môžu byť tiež vnorené (priečinky v priečinkoch), čím sa vytvorí „rodokmeň“. Platí rovnaký princíp: dieťa nikdy nemôže uniknúť z priečinka svojich rodičov. Teraz, keď ste pochopili, ako sa kontexty stohovania správajú ako priečinky, ktoré zoskupujú a menia poradie vrstiev, stojí za to sa opýtať: prečo určité vlastnosti – ako napríklad transformácia a nepriehľadnosť – vytvárajú nové kontexty stohovania? Vec je nasledovná: tieto vlastnosti nevytvárajú skladacie kontexty kvôli tomu, ako vyzerajú; robia to kvôli tomu, ako funguje prehliadač pod kapotou. Keď použijete transformáciu, nepriehľadnosť, filter alebo perspektívu, hovoríte prehliadaču: „Hej, tento prvok sa môže pohybovať, otáčať alebo miznúť, takže buďte pripravený!“
Keď použijete tieto vlastnosti, prehliadač vytvorí nový kontext skladania na efektívnejšie riadenie vykresľovania. To umožňuje prehliadaču samostatne spracovávať animácie, transformácie a vizuálne efekty, čím sa znižuje potreba prepočítavať, ako tieto prvky interagujú so zvyškom stránky. Predstavte si to tak, že prehliadač hovorí: „S týmto priečinkom budem pracovať samostatne, aby som nemusel premiestňovať celý stôl zakaždým, keď sa v ňom niečo zmení.“ Ale existujevedľajším účinkom. Keď prehliadač zdvihne prvok do svojej vlastnej vrstvy, musí „zjednotiť“ všetko v ňom a vytvoriť nový kontext. Je to ako zložiť priečinok zo stola a manipulovať s ním samostatne; všetko v tomto priečinku sa zoskupí a prehliadač s tým teraz zaobchádza ako s jednou jednotkou, keď rozhoduje o tom, čo bude nad čím. Takže aj keď sa môže zdať, že vlastnosti transformácie a nepriehľadnosti neovplyvňujú spôsob, akým sa prvky vizuálne ukladajú, ovplyvňujú to, a je to kvôli optimalizácii výkonu. Niekoľko ďalších vlastností CSS môže z podobných dôvodov vytvárať kontexty skladania. MDN poskytuje úplný zoznam, ak chcete ísť hlbšie. Je ich pomerne veľa, čo len ilustruje, aké ľahké je neúmyselne vytvoriť kontext skladania bez toho, aby ste o tom vedeli. Problém „rozbaľovania“. Problémy so stohovaním môžu vzniknúť z mnohých dôvodov, ale niektoré sú bežnejšie ako iné. Modálne komponenty sú klasickým vzorom, pretože vyžadujú prepnutie komponentu tak, aby sa „otvoril“ v hornej vrstve nad všetkými ostatnými prvkami, a potom ho z hornej vrstvy „zatvorený“ odstránil. Som si celkom istý, že všetci sme sa dostali do situácie, keď otvoríme modál a z akéhokoľvek dôvodu sa neobjaví. Nejde o to, že by sa neotvoril správne, ale o to, že je mimo dohľadu v nižšej vrstve kontextu stohovania. To vás núti premýšľať o tom, "ako to?" keďže si nastavil:
.overlay { poloha: pevná; /* vytvorí kontext skladania */ z-index: 1; /* umiestni prvok na vrstvu nad všetko ostatné */ vložka: 0; šírka: 100 %; výška: 100vh; prepad: skrytý; farba pozadia: #00000080; }
Vyzerá to správne, ale ak je nadradený prvok obsahujúci modálny spúšťač podriadený prvok v rámci iného nadradeného prvku, ktorý je tiež nastavený na z-index: 1, technicky to umiestni modálny prvok do podvrstvy zakrytej hlavným priečinkom. Pozrime sa na tento konkrétny scenár a niekoľko ďalších bežných úskalí stohovacieho kontextu. Myslím, že uvidíte nielen to, aké ľahké je neúmyselne vytvárať kontexty skladania, ale aj to, ako ich nesprávne spravovať. Tiež to, ako sa vrátite do riadeného stavu, závisí od situácie. Scenár 1: The Trapped Modal
Okamžite môžete vidieť svoj modal uväznený v nízkoúrovňovej vrstve a identifikovať rodiča. Rozšírenia prehliadača Inteligentní vývojári vytvorili rozšírenia, ktoré im pomôžu. Nástroje, ako je toto rozšírenie prehliadača Chrome „CSS Stacking Context Inspector“, pridávajú do vašich nástrojov pre vývojárov ďalšiu kartu z-index, ktorá vám zobrazí informácie o prvkoch, ktoré vytvárajú kontext stohovania.
Rozšírenia IDE Môžete dokonca zistiť problémy počas vývoja s rozšírením, ako je toto pre VS Code, ktoré upozorňuje na potenciálne problémy so stohovaním kontextu priamo vo vašom editore.
Rozloženie a opätovné získanie kontroly Keď identifikujeme hlavnú príčinu, ďalším krokom je riešiť ju. Existuje niekoľko prístupov, ktoré môžete použiť na riešenie tohto problému, a uvediem ich v poradí. Môžete si však vybrať kohokoľvek na akejkoľvek úrovni; nikto sa nemôže sťažovať ani druhému brániť. Zmeňte štruktúru HTML Toto sa považuje za optimálne riešenie. Aby ste narazili na problém s prekrývaním kontextu, musíte umiestniť niektoré prvky na zábavné pozície vo svojom HTML. Reštrukturalizácia stránky vám pomôže pretvoriť model DOM a odstrániť problém s prekrývaním kontextu. Nájdite problematický prvok a odstráňte ho z prvku zachytávania v značke HTML. Napríklad prvý scenár, “The Trapped Modal”, môžeme vyriešiť tak, že presunieme .modal-container von z hlavičky a umiestnime ho do prvku
.Tento obsah má z-index 2 a stále nebude pokrývať modal.Hlavička
Hlavný obsah
Keď kliknete na tlačidlo „Otvoriť modal“, modal sa umiestni pred všetko ostatné tak, ako má byť. Pozrite si scenár pera 1: The Trapped Modal (Solution) [forked] od Shoyombo Gabriel Ayomide. UpravteKontext nadradeného stohovania v CSS Čo ak je prvok taký, s ktorým nemôžete pohnúť bez porušenia rozloženia? Je lepšie riešiť problém: rodič vytvára kontext. Nájdite vlastnosť (alebo vlastnosti) CSS zodpovednú za spustenie kontextu a odstráňte ju. Ak má svoj účel a nedá sa odstrániť, priraďte rodičovi vyššiu hodnotu z-indexu ako jeho súrodenecké prvky, aby sa zdvihol celý kontajner. S vyššou hodnotou z-indexu sa nadradený kontajner presunie navrch a jeho potomkovia sa zdajú byť bližšie k používateľovi. Na základe toho, čo sme sa naučili v scenári „The Submerged Dropdown“, nemôžeme presunúť rozbaľovaciu ponuku z navigačného panela; nedávalo by to zmysel. Hodnotu z-indexu kontajnera .navbar však môžeme zvýšiť tak, aby bola väčšia ako hodnota z-indexu prvku .content. .navbar { pozadie: #333; /* z-index: 1; */ z-index: 3; poloha: relatívna; }
Vďaka tejto zmene sa teraz pred obsahom bez problémov zobrazí rozbaľovacia ponuka .
Pozrite si scenár pera 2: The Submerged Dropdown (riešenie) [rozdvojené] Shoyombo Gabriel Ayomide.
Vyskúšajte portály, ak používate rámec
V rámcoch ako React alebo Vue je portál funkcia, ktorá vám umožňuje vykresliť komponent mimo jeho normálnej nadradenej hierarchie v DOM. Portály sú ako teleportačné zariadenie pre vaše komponenty. Umožňujú vám vykresliť HTML komponentu kdekoľvek v dokumente (zvyčajne priamo do document.body), pričom ho ponechávajú logicky prepojené s jeho pôvodným rodičom pre rekvizity, stavy a udalosti. Je to ideálne na elimináciu pascí v súvislosti so skladaním, pretože vykreslený výstup sa doslova objaví mimo problematického nadradeného kontajnera.
ReactDOM.createPortal(
To zaisťuje, že váš rozbaľovací obsah nie je skrytý za nadradeným prvkom, aj keď má nadradený obsah pretečený: skrytý alebo nižší z-index. V scenári „The Clipped Tooltip“, na ktorý sme sa pozreli predtým, som použil portál na záchranu tipu z pretečenia: skrytý klip jeho umiestnením do tela dokumentu a umiestnením nad spúšťač v kontajneri. Pozrite si scenár pera 3: The Clipped Tooltip (riešenie) [rozdvojené] od Shoyomba Gabriela Ayomideho. Predstavujeme kontext stohovania bez vedľajších účinkov Všetky prístupy vysvetlené v predchádzajúcej časti sú zamerané na „rozoberanie“ prvkov z problematických kontextov skladania, existujú však situácie, keď skutočne potrebujete alebo chcete vytvoriť kontext skladania. Vytvorenie nového kontextu stohovania je jednoduché, ale všetky prístupy majú vedľajší efekt. Teda okrem použitia izolácie: izolovať. Pri aplikovaní na prvok sa kontext zoskupovania podriadených prvkov tohto prvku určuje vo vzťahu ku každému podriadenému prvku a v rámci tohto kontextu, a nie je ovplyvnený prvkami mimo neho. Klasickým príkladom je priradenie tohto prvku zápornej hodnoty, ako napríklad z-index: -1. Predstavte si, že máte komponent .card. Chcete pridať dekoratívny tvar, ktorý je umiestnený za textom karty .card, ale na vrchu pozadia karty. Bez kontextu skladania na karte, z-index: -1 odošle tvar na koniec koreňového kontextu ukladania (celá stránka). Takto zmizne za bielym pozadím karty .card: Pozrite si negatívny z-index (problém) pera [forked] od Shoyomba Gabriela Ayomideho. Aby sme to vyriešili, vyhlásime izoláciu: izolovať na rodičovskej karte . Pozrite si negatívny z-index (roztok) pera (rozdvojený) od Shoyomba Gabriela Ayomideho. Teraz sa prvok .card sám stáva súvislým kontextom. Keď jeho podriadený prvok – dekoratívny tvar vytvorený na pseudoprvku :before – má z-index: -1, dostane sa až na koniec kontextu nadradeného zoskupenia. Dokonale sedí za textom a na vrchu pozadia karty, ako bolo zamýšľané. Záver Pamätajte: nabudúce, keď sa váš z-index bude zdať mimo kontroly, je to zachytený kontext. Referencie
Kontext stohovania (MDN) Z-index a kontexty skladania (web.dev) „Ako vytvoriť nový kontext skladania s vlastnosťou izolácie v CSS“, Natalie Pina "What The Heck, z-index?", Josh Comeau
Ďalšie čítanie o SmashingMag
„Správa CSS Z-Index vo veľkých projektoch“, Steven Frieson „Nalepovacie hlavičky a prvky plnej výšky: zložitá kombinácia“, Philip Braunen „Správa Z-Indexu vo webovej aplikácii založenej na komponentoch“, Pavel Pomerantsev „Vlastnosť CSS Z-Index: Komplexný pohľad“, Louis Lazaris
