Előfordult már, hogy z-index: 99999 értéket állított be egy elemen a CSS-ben, és az nem jön ki a többi elem fölé? Egy ekkora értéknek könnyen el kell helyeznie az elemet vizuálisan bármi más fölé, feltételezve, hogy az összes különböző elem vagy alacsonyabb értékre van állítva, vagy egyáltalán nincs beállítva. Egy weboldalt általában kétdimenziós térben ábrázolnak; specifikus CSS-tulajdonságok alkalmazásával azonban egy képzeletbeli z-tengelysíkot vezetünk be a mélység közvetítésére. Ez a sík merőleges a képernyőre, és ebből a felhasználó érzékeli az elemek egymásra helyezését. A képzeletbeli z-tengely mögött, vagyis a halmozott elemek felhasználó általi észlelésében az az ötlet, hogy az azt létrehozó CSS-tulajdonságok együttesen alkotják az úgynevezett halmozási kontextust. Beszélni fogunk arról, hogyan „halmozódnak fel” az elemek egy weboldalon, mi szabályozza a halmozási sorrendet, és hogyan lehet gyakorlati megközelítéseket tenni az elemek „felbontásához”, ha szükséges. A kontextusok halmozásáról Képzelje el weboldalát íróasztalként. Miközben HTML-elemeket ad hozzá, papírdarabokat tesz le egymás után az asztalra. Az utolsó elhelyezett papírdarab megegyezik a legutóbb hozzáadott HTML elemmel, és az összes többi előtte elhelyezett papír tetején helyezkedik el. Ez a normál dokumentumfolyamat, még beágyazott elemek esetén is. Maga az asztal a gyökér halmozási környezetet képviseli, amelyet a elem alkot, és amely tartalmazza az összes többi mappát. Mostantól bizonyos CSS-tulajdonságok lépnek életbe. Az olyan tulajdonságok, mint a pozíció (z-indexszel), az átlátszatlanság, az átalakítás és a tartalom) mappaként működnek. Ez a mappa vesz egy elemet és annak összes gyermekét, kibontja őket a fő veremből, és külön alverembe csoportosítja, létrehozva az úgynevezett halmozási kontextust. Pozicionált elemek esetén ez akkor történik, ha az auto-tól eltérő z-index értéket deklarálunk. Az olyan tulajdonságok esetében, mint az átlátszatlanság, az átalakítás és a szűrő, a halmozási kontextus automatikusan létrejön bizonyos értékek alkalmazásakor.
Próbáld megérteni ezt: Ha egy papírdarab (azaz egy gyermekelem) egy mappában (azaz a szülő halmozási kontextusában) van, soha nem léphet ki abból a mappából, vagy nem kerülhet egy másik mappában lévő papírok közé. A z-index mostantól csak a saját mappájában releváns.
Az alábbi ábrán a B papír most a B mappa halmozási környezetébe tartozik, és csak a mappában lévő többi papírral együtt rendelhető meg.
Ha úgy tetszik, képzelje el, hogy két mappa van az asztalán:
.mappa-a { z-index: 1; } .mappa-b { z-index: 2; }
Frissítsük egy kicsit a jelölést. Az A mappa belsejében egy speciális oldal található, z-index: 9999. A B mappa belsejében egy sima oldal, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Melyik oldal van fent? Ez a .plain-oldal a B mappában. A böngésző figyelmen kívül hagyja az alárendelt papírokat, és először a két mappát rakja egymásra. Látja a B mappát (z-index: 2), és az A mappa tetejére helyezi (z-index: 1), mert tudjuk, hogy kettő nagyobb, mint egy. Eközben a z-index: 9999 oldalra állított .special-page a köteg alján található, annak ellenére, hogy a z-index a lehető legmagasabb értékre van állítva. A halmozási kontextusok egymásba ágyazhatók (mappák a mappákon belül), létrehozva egy „családfát”. Ugyanez az elv érvényesül: a gyerek soha nem menekülhet el a szülei mappájából. Most, hogy megértette, hogyan viselkednek a halmozási kontextusok, mint a rétegeket csoportosító és átrendező mappák, érdemes feltenni a kérdést: miért hoznak létre bizonyos tulajdonságok – például az átalakítás és az átlátszatlanság – új halmozási kontextusokat? Itt van a helyzet: ezek a tulajdonságok nem a megjelenésük miatt hoznak létre halmozási kontextust; a böngésző működése miatt teszik ezt. Amikor transzformációt, átlátszatlanságot, szűrőt vagy perspektívát alkalmaz, azt mondja a böngészőnek: „Hé, ez az elem elmozdulhat, elfordulhat vagy elhalványulhat, ezért legyen kész!”
Amikor ezeket a tulajdonságokat használja, a böngésző új halmozási környezetet hoz létre a megjelenítés hatékonyabb kezelése érdekében. Ez lehetővé teszi a böngésző számára, hogy önállóan kezelje az animációkat, az átalakításokat és a vizuális effektusokat, csökkentve annak szükségességét, hogy újraszámolja, hogyan hatnak ezek az elemek az oldal többi részével. Képzelje el úgy, hogy a böngésző azt mondja: „Ezt a mappát külön kezelem, hogy ne kelljen az egész asztalt minden alkalommal átrendeznem, amikor valami megváltozik benne.” De vanmellékhatás. Miután a böngésző felemel egy elemet a saját rétegébe, mindent „le kell lapítania” benne, új halmozási kontextust hozva létre. Ez olyan, mintha levenne egy mappát az asztalról, hogy külön kezelje; a mappán belül minden csoportosítva lesz, és a böngésző mostantól egyetlen egységként kezeli, amikor eldönti, hogy mi kerüljön a tetejére. Tehát bár úgy tűnik, hogy az átalakítási és átlátszatlansági tulajdonságok nem befolyásolják az elemek vizuális egymásra helyezésének módját, mégis igen, és ez a teljesítmény optimalizálását szolgálja. Számos más CSS-tulajdonság is létrehozhat halmozási kontextust hasonló okokból. Az MDN teljes listát biztosít, ha mélyebbre szeretne ásni. Jó néhány van, ami csak illusztrálja, milyen könnyű véletlenül létrehozni egy halmozási kontextust anélkül, hogy tudnánk róla. A „kirakás” probléma A halmozási problémák számos okból adódhatnak, de egyesek gyakoribbak, mint mások. A modális komponensek klasszikus mintázatúak, mert megkövetelik, hogy a komponens „nyíljon” az összes többi elem feletti felső rétegen, majd távolítsa el a felső rétegről, amikor „zárva van”. Eléggé biztos vagyok benne, hogy mindannyian belefutottunk abba a helyzetbe, hogy megnyitunk egy modált, és bármilyen okból kifolyólag nem jelenik meg. Nem arról van szó, hogy nem nyílt ki megfelelően, hanem arról, hogy a halmozási kontextus alsó rétegében nem látható. Ez arra készteti a kérdést, hogy „hogyan lehet?” mióta beállítottad:
.overlay { pozíció: rögzített; /* létrehozza a halmozási kontextust */ z-index: 1; /* minden más fölé helyezi az elemet */ betét: 0; szélesség: 100%; magasság: 100vh; túlcsordulás: rejtett; háttérszín: #00000080; }
Ez helyesnek tűnik, de ha a modális triggert tartalmazó szülőelem egy másik szülőelemen belüli gyermekelem, amely szintén z-indexre van beállítva: 1, ez technikailag a főmappa által eltakart alrétegbe helyezi a modált. Nézzük meg ezt a konkrét forgatókönyvet, és néhány más, a halmozási kontextusban előforduló buktatót. Azt hiszem, nemcsak azt fogja látni, hogy milyen könnyű akaratlanul is egymásra halmozott kontextusokat létrehozni, hanem azt is, hogyan lehet azokat rosszul kezelni. Az is, hogy hogyan tér vissza a kezelt állapotba, a helyzettől függ. 1. forgatókönyv: The Trapped Modal
Azonnal láthatja, hogy a modál egy alacsony szintű rétegben van, és azonosíthatja a szülőt. Böngészőbővítmények Az intelligens fejlesztők bővítményeket készítettek, hogy segítsenek. Az olyan eszközök, mint ez a „CSS Stacking Context Inspector” Chrome-bővítmény, egy további z-index lapot adnak a DevToolshoz, hogy információkat jelenítsenek meg azokról az elemekről, amelyek halmozási kontextust hoznak létre.
IDE kiterjesztések Még a fejlesztés során is észreveheti a problémákat a VS Code-hoz hasonló kiterjesztéssel, amely közvetlenül a szerkesztőben kiemeli a lehetséges halmozási környezeti problémákat.
Felbontás és irányítás visszaszerzése Miután azonosítottuk a kiváltó okot, a következő lépés annak kezelése. Számos módszer létezik a probléma megoldására, és ezeket sorban felsorolom. Bárkit választhatsz bármilyen szinten; senki nem panaszkodhat vagy akadályozhatja a másikat. Módosítsa a HTML-struktúrát Ez tekinthető az optimális megoldásnak. Ahhoz, hogy halmozási kontextusba ütközhessen, bizonyos elemeket vicces pozíciókban kell elhelyeznie a HTML-ben. Az oldal átstrukturálása segít átalakítani a DOM-ot, és kiküszöböli a halmozási környezet problémáját. Keresse meg a problémás elemet, és távolítsa el a HTML-jelölés csapdázási eleméből. Például megoldhatjuk az első forgatókönyvet, a „The Trapped Modal”-t, ha a .modal-container-t kimozdítjuk a fejlécből, és önmagában a
elembe helyezzük.Ennek a tartalomnak a z-indexe 2, és továbbra sem fedi le a módozatot.Fejléc
Fő tartalom
Ha rákattint a „Modal megnyitása” gombra, a modális minden más elé kerül, ahogyan annak lennie kell. Lásd: Shoyombo Gabriel Ayomide tollforgatókönyve 1: A csapdába esett modális (megoldás) [forked]. Állítsa be aSzülő halmozási kontextus a CSS-ben Mi van akkor, ha az elem olyan, amelyet nem tud mozgatni anélkül, hogy megtörné az elrendezést? Jobb, ha foglalkozunk a kérdéssel: a szülő határozza meg a kontextust. Keresse meg a kontextus kiváltásáért felelős CSS-tulajdont (vagy tulajdonságokat), és távolítsa el. Ha van célja, és nem távolítható el, adjon meg a szülőnek magasabb z-index értéket, mint a testvér elemei, hogy megemelje a teljes tárolót. Magasabb z-index érték esetén a szülőtároló a tetejére kerül, és a gyermekei közelebb jelennek meg a felhasználóhoz. A „The Submerged Dropdown” forgatókönyvben tanultak alapján a legördülő menüt nem tudjuk kimozdítani a navigációs sávból; nem lenne értelme. Azonban növelhetjük a .navbar tároló z-index értékét nagyobbra, mint a .content elem z-index értékét. .navbar { háttér: #333; /* z-index: 1; */ z-index: 3; pozíció: relatív; }
Ezzel a változtatással a .dropdown-menü probléma nélkül megjelenik a tartalom előtt.
Lásd a Toll 2. forgatókönyvét: The Submerged Dropdown (megoldás) [elágazta] Shoyombo Gabriel Ayomide.
Próbálja ki a portálokat, ha keretrendszert használ
Az olyan keretrendszerekben, mint a React vagy a Vue, a portál egy olyan szolgáltatás, amely lehetővé teszi a DOM normál szülőhierarchiáján kívüli összetevők megjelenítését. A portálok olyanok, mint egy teleportáló eszköz az összetevők számára. Lehetővé teszik egy összetevő HTML-kódjának megjelenítését bárhol a dokumentumban (általában közvetlenül a document.body fájlban), miközben logikusan csatlakozik az eredeti szülőhöz a kellékek, állapotok és események szempontjából. Ez tökéletes a halmozási kontextuscsapdák elkerülésére, mivel a megjelenített kimenet szó szerint a problémás szülőtárolón kívül jelenik meg.
ReactDOM.createPortal(
Ez biztosítja, hogy a legördülő tartalom ne legyen elrejtve a szülője mögé, még akkor sem, ha a szülő túlcsordulásos: rejtett vagy alacsonyabb z-indexű. A korábban vizsgált „A kivágott eszköztipp” forgatókönyvében egy portált használtam az eszköztipp megmentésére a túlcsordulástól: rejtett klipet úgy, hogy a dokumentumtörzsbe helyeztem, és a tárolóban lévő trigger fölé helyeztem. Lásd a Toll 3. forgatókönyvét: A kivágott eszköztipp (megoldás) [elágazva], Shoyombo Gabriel Ayomide. A halmozási kontextus bemutatása mellékhatások nélkül Az előző részben ismertetett összes megközelítés célja az elemek „kibontása” a problémás halmozási kontextusokból, de vannak olyan helyzetek, amikor ténylegesen halmozási kontextusra van szüksége vagy létre kell hoznia. Egy új halmozási kontextus létrehozása egyszerű, de minden megközelítésnek van mellékhatása. Vagyis, kivéve az izoláció használatát: izolál. Amikor egy elemre alkalmazzuk, az adott elem gyermekeinek halmozási kontextusa minden egyes gyermekhez képest és azon belül van meghatározva, nem pedig azon kívüli elemek befolyásolják. Egy klasszikus példa az, hogy az elemhez negatív értéket rendelünk, például z-indexet: -1. Képzelje el, hogy van egy .card összetevője. Olyan dekoratív formát szeretne hozzáadni, amely a .card szövege mögött helyezkedik el, de a kártya hátterének tetején. A kártya halmozási kontextusa nélkül a z-index: -1 elküldi az alakzatot a gyökér halmozási kontextus aljára (a teljes oldalra). Ezzel eltűnik a .card fehér háttere mögött: Lásd a Pen Negative z-indexet (probléma) [elágazta] Shoyombo Gabriel Ayomide. Ennek megoldására az izolációt deklaráljuk: izolálás a szülő .cardon: Lásd a Pen Negative z-indexet (oldat) [villás], Shoyombo Gabriel Ayomide. Most maga a .card elem halmozási kontextussá válik. Ha gyermekelemének – a :before pszeudoelemen létrehozott díszítő alakzatnak – a z-indexe: -1, az a szülő halmozási kontextusának legmélyére kerül. A szándéknak megfelelően tökéletesen illeszkedik a szöveg mögé és a kártya hátterének tetejére. Következtetés Ne feledje: amikor legközelebb úgy tűnik, hogy a z-index kikerült az irányítás alól, az egy csapdába esett halmozási kontextus. Hivatkozások
Halmozási kontextus (MDN) Z-index és halmozási környezetek (web.dev) „Hogyan hozzunk létre új halmozási kontextust az izolációs tulajdonsággal a CSS-ben”, Natalie Pina „Mi a fene, z-index?”, Josh Comeau
További olvasnivalók a SmashingMag-ról
„CSS Z-index kezelése nagy projektekben”, Steven Frieson „Ragadó fejlécek és teljes magasságú elemek: trükkös kombináció”, Philip Braunen „A Z-index kezelése komponens alapú webalkalmazásban”, Pavel Pomerantsev „A Z-index CSS-tulajdonsága: Átfogó megjelenés”, Louis Lazaris
