Nastavili jste někdy z-index: 99999 na prvek ve vašem CSS a nevychází nad ostatními prvky? Tak velká hodnota by měla snadno umístit tento prvek vizuálně nad cokoli jiného, za předpokladu, že všechny různé prvky jsou nastaveny buď na nižší hodnotu, nebo nejsou nastaveny vůbec. Webová stránka je obvykle reprezentována ve dvourozměrném prostoru; použitím specifických vlastností CSS je však zavedena imaginární rovina osy z, která vyjadřuje hloubku. Tato rovina je kolmá k obrazovce a uživatel z ní vnímá pořadí prvků, jeden na druhém. Myšlenka pomyslné osy z, uživatelova vnímání skládaných prvků, spočívá v tom, že vlastnosti CSS, které je vytvářejí, se spojí a vytvoří to, čemu říkáme kontext skládání. Budeme hovořit o tom, jak jsou prvky „skládány“ na webové stránce, co řídí pořadí překrývání a o praktických přístupech k „odkládání“ prvků v případě potřeby. O Stacking Contexts Představte si svou webovou stránku jako pracovní stůl. Při přidávání prvků HTML pokládáte na stůl kusy papíru jeden po druhém. Poslední položený kus papíru je ekvivalentní naposledy přidanému prvku HTML a sedí na všech ostatních papírech umístěných před ním. Toto je normální tok dokumentů, a to i pro vnořené prvky. Deska sama o sobě představuje kořenový kontext skládání, tvořený prvkem , který obsahuje všechny ostatní složky. Nyní přicházejí do hry specifické vlastnosti CSS. Vlastnosti jako poloha (s indexem z), neprůhlednost, transformace a obsah) fungují jako složka. Tato složka vezme prvek a všechny jeho potomky, extrahuje je z hlavního zásobníku a seskupí je do samostatného dílčího zásobníku, čímž vytvoří to, co nazýváme kontext zásobníku. U polohovaných prvků k tomu dochází, když deklarujeme jinou hodnotu z-indexu než auto. U vlastností, jako je neprůhlednost, transformace a filtr, se kontext překrývání vytvoří automaticky, když jsou použity konkrétní hodnoty.
Zkuste to pochopit: Jakmile je kus papíru (tj. podřízený prvek) ve složce (tj. v kontextu skládání rodičů), nemůže tuto složku nikdy opustit ani být umístěn mezi papíry v jiné složce. Jeho z-index je nyní relevantní pouze uvnitř jeho vlastní složky.
Na obrázku níže je papír B nyní v kontextu stohování složky B a lze jej objednat pouze s jinými papíry ve složce.
Představte si, chcete-li, že máte na stole dvě složky:
.složka-a { z-index: 1; } .složka-b { z-index: 2; }
Trochu aktualizujeme označení. Vnitřní složka A je speciální stránka, z-index: 9999. Vnitřní složka B je prostá stránka, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Která stránka je nahoře? Je to .plain-page ve složce B. Prohlížeč ignoruje podřízené papíry a naskládá dvě složky jako první. Vidí složku B (z-index: 2) a umístí ji nad složku A (z-index: 1), protože víme, že dvě jsou větší než jedna. Mezitím je stránka .special-page nastavená na z-index: 9999 na konci zásobníku, i když je její z-index nastaven na nejvyšší možnou hodnotu. Kontexty skládání lze také vnořit (složky uvnitř složek) a vytvořit tak „rodokmen“. Platí stejný princip: dítě nikdy nemůže uniknout ze složky rodičů. Nyní, když jste pochopili, jak se kontexty překrývání chovají jako složky, které seskupují a mění pořadí vrstev, stojí za to se zeptat: proč určité vlastnosti – jako transformace a neprůhlednost – vytvářejí nové kontexty překrývání? Věc je taková: tyto vlastnosti nevytvářejí kontexty skládání kvůli tomu, jak vypadají; dělají to kvůli tomu, jak funguje prohlížeč pod kapotou. Když použijete transformaci, neprůhlednost, filtr nebo perspektivu, říkáte prohlížeči: „Hej, tento prvek se může posunout, otočit nebo vyblednout, takže buďte připraveni!“
Když použijete tyto vlastnosti, prohlížeč vytvoří nový kontext překrývání, aby bylo možné efektivněji spravovat vykreslování. To prohlížeči umožňuje zpracovávat animace, transformace a vizuální efekty nezávisle, což snižuje potřebu přepočítávat, jak tyto prvky interagují se zbytkem stránky. Představte si to tak, že prohlížeč říká: „S touto složkou budu pracovat samostatně, abych nemusel přeskupovat celý stůl pokaždé, když se v něm něco změní.“ Ale existujevedlejší účinek. Jakmile prohlížeč zvedne prvek do své vlastní vrstvy, musí vše v něm „srovnat“ a vytvořit nový kontext skládání. Je to jako sundat složku ze stolu, abyste s ní manipulovali samostatně; vše v této složce se seskupí a prohlížeč s tím nyní zachází jako s jednou jednotkou, když rozhoduje o tom, co bude nad čím. Takže i když se může zdát, že vlastnosti transformace a neprůhlednosti neovlivňují způsob, jakým se prvky vizuálně skládají, ano, a je to kvůli optimalizaci výkonu. Několik dalších vlastností CSS může z podobných důvodů také vytvářet kontexty skládání. MDN poskytuje úplný seznam, pokud se chcete ponořit hlouběji. Je jich poměrně dost, což jen ilustruje, jak snadné je neúmyslně vytvořit kontext skládání, aniž byste o tom věděli. Problém „rozkládání“. Problémy se stohováním mohou nastat z mnoha důvodů, ale některé jsou častější než jiné. Modální komponenty jsou klasickým vzorem, protože vyžadují přepnutí komponenty tak, aby se „otevřela“ v horní vrstvě nad všemi ostatními prvky, a poté ji z horní vrstvy „zavřené“ sejmout. Jsem si docela jistý, že jsme se všichni dostali do situace, kdy otevíráme modál a z jakéhokoli důvodu se neobjeví. Nejde o to, že by se neotevřel správně, ale o to, že je mimo dohled v nižší vrstvě kontextu skládání. To vás nutí přemýšlet "jak to?" protože jsi nastavil:
.overlay { poloha: pevná; /* vytvoří kontext skládání */ z-index: 1; /* umístí prvek na vrstvu nad vše ostatní */ vložka: 0; šířka: 100 %; výška: 100vh; přepad: skrytý; barva pozadí: #00000080; }
Vypadá to správně, ale pokud je nadřazený prvek obsahující modální spouštěč podřízeným prvkem v jiném nadřazeném prvku, který je také nastaven na z-index: 1, technicky to umístí modal do podvrstvy zakryté hlavní složkou. Podívejme se na tento konkrétní scénář a několik dalších běžných úskalí souvisejících s vrstvením. Myslím, že uvidíte nejen to, jak snadné je neúmyslně vytvořit překrývající se kontexty, ale také jak je špatně spravovat. Také to, jak se vrátíte do spravovaného stavu, závisí na situaci. Scénář 1: The Trapped Modal
Okamžitě můžete vidět svůj modal uvězněný v nízkoúrovňové vrstvě a identifikovat rodiče. Rozšíření prohlížeče Chytří vývojáři vytvořili rozšíření, která jim pomohou. Nástroje jako toto rozšíření pro Chrome „CSS Stacking Context Inspector“ přidávají do vašich DevTools další kartu z-index, která vám zobrazí informace o prvcích, které vytvářejí kontext skládání.
Rozšíření IDE Můžete dokonce odhalit problémy během vývoje s rozšířením, jako je toto pro VS Code, které upozorňuje na potenciální problémy se skládáním kontextu přímo ve vašem editoru.
Rozbalení a opětovné získání kontroly Poté, co jsme identifikovali hlavní příčinu, je dalším krokem její řešení. Existuje několik způsobů, jak tento problém vyřešit, a já je uvedu v pořadí. Můžete si však vybrat kohokoli na jakékoli úrovni; nikdo si nemůže stěžovat nebo bránit druhému. Změňte strukturu HTML Toto je považováno za optimální řešení. Abyste narazili na problém se skládáním kontextu, musíte v HTML umístit některé prvky na vtipné pozice. Restrukturalizace stránky vám pomůže přetvořit DOM a eliminovat problém s překrýváním kontextu. Najděte problematický prvek a odstraňte jej z prvku soutisku ve značce HTML. První scénář, „The Trapped Modal“, můžeme například vyřešit přesunutím kontejneru .modal-container z hlavičky a jeho umístěním do prvku
samotného.Tento obsah má z-index 2 a stále nebude pokrývat modal.Záhlaví
Hlavní obsah
Když kliknete na tlačítko „Otevřít modal“, modal se umístí před vše ostatní, jak má být. Viz scénář Pen 1: The Trapped Modal (Solution) [forked] Shoyombo Gabriel Ayomide. UpravteNadřazený kontext skládání v CSS Co když je prvek takový, se kterým nemůžete pohybovat, aniž byste narušili rozvržení? Je lepší problém řešit: rodič vytváří kontext. Najděte vlastnost (nebo vlastnosti) CSS zodpovědnou za spuštění kontextu a odstraňte ji. Pokud má svůj účel a nelze jej odstranit, dejte nadřazenému prvku vyšší hodnotu z-indexu než jeho sourozenecké prvky, aby se zvedl celý kontejner. S vyšší hodnotou z-indexu se nadřazený kontejner přesune na začátek a jeho podřízené položky se zobrazí uživateli blíže. Na základě toho, co jsme se naučili ve scénáři „The Submerged Dropdown“, nemůžeme přesunout rozevírací seznam z navigační lišty; nedávalo by to smysl. Můžeme však zvýšit hodnotu z-index kontejneru .navbar tak, aby byla vyšší než hodnota z-index prvku .content. .navbar { pozadí: #333; /* z-index: 1; */ z-index: 3; poloha: relativní; }
Díky této změně se nyní před obsahem bez problémů zobrazí rozbalovací nabídka .
Viz scénář pera 2: The Submerged Dropdown (řešení) [rozvětvený] Shoyombo Gabriel Ayomide.
Vyzkoušejte portály, pokud používáte rámec
V rámcích jako React nebo Vue je portál funkcí, která umožňuje vykreslit komponentu mimo její normální nadřazenou hierarchii v DOM. Portály jsou jako teleportační zařízení pro vaše komponenty. Umožňují vám vykreslit HTML komponenty kdekoli v dokumentu (obvykle přímo do document.body) a zároveň jej zachovat logicky připojené k původnímu nadřazenému prvku pro rekvizity, stavy a události. To je ideální pro útěky z překrývání kontextu, protože vykreslený výstup se doslova objeví mimo problematický nadřazený kontejner.
ReactDOM.createPortal(
Tím zajistíte, že obsah rozbalovací nabídky nebude skrytý za nadřazeným prvkem, i když nadřazený prvek přeteče: skrytý nebo s nižším z-indexem. Ve scénáři „The Clipped Tooltip“, na který jsme se podívali dříve, jsem pomocí portálu zachránil popisek z přetečení: skrytý klip jeho umístěním do těla dokumentu a umístěním nad spouštěč v kontejneru. Viz scénář pera 3: The Clipped Tooltip (řešení) [rozvětvený] Shoyombo Gabriel Ayomide. Představujeme kontext stohování bez vedlejších účinků Všechny přístupy vysvětlené v předchozí části jsou zaměřeny na „oddělování“ prvků z problematických kontextů skládání, ale existují situace, kdy budete skutečně potřebovat nebo chtít kontext skládání vytvořit. Vytvoření nového kontextu skládání je snadné, ale všechny přístupy mají vedlejší efekt. Tedy kromě použití izolace: izolovat. Při aplikaci na prvek je kontext překrývání potomků tohoto prvku určen vzhledem ke každému potomkovi a v rámci tohoto kontextu, nikoli ovlivněn prvky mimo něj. Klasickým příkladem je přiřazení tohoto prvku záporné hodnoty, jako je z-index: -1. Představte si, že máte komponentu .card. Chcete přidat dekorativní tvar, který bude za textem karty, ale nad pozadím karty. Bez kontextu skládání na kartě odešle z-index: -1 tvar na konec kořenového kontextu skládání (celá stránka). Tím zmizí za bílým pozadím karty .card: Viz negativní z-index (problém) pera [forked] od Shoyombo Gabriel Ayomide. Abychom to vyřešili, deklarujeme izolaci: isolate na nadřazené kartě . Viz Negativní z-index (řešení) pera [forked] od Shoyombo Gabriel Ayomide. Nyní se prvek .card sám stává kontextem skládání. Když jeho podřízený prvek – ozdobný tvar vytvořený na pseudoprvku :before – má z-index: -1, přejde na samý konec kontextu překrývání rodiče. Dokonale sedí za textem a na pozadí karty, jak bylo zamýšleno. Závěr Pamatujte: až se příště bude zdát, že se váš z-index vymkl kontrole, je to uvězněný kontext skládání. Reference
Kontext skládání (MDN) Z-index a kontexty skládání (web.dev) „Jak vytvořit nový kontext skládání pomocí vlastnosti izolace v CSS“, Natalie Pina "What The Heck, z-index?", Josh Comeau
Další čtení na SmashingMag
„Správa CSS Z-Index ve velkých projektech“, Steven Frieson „Nalepovací záhlaví a prvky plné výšky: Záludná kombinace“, Philip Braunen „Správa Z-Indexu ve webové aplikaci založené na komponentách“, Pavel Pomerantsev „Vlastnost CSS Z-Index: Komplexní vzhled“, Louis Lazaris
