Het jy al ooit z-indeks: 99999 op 'n element in jou CSS gestel, en dit kom nie bo-op ander elemente uit nie? 'n Waarde wat groot is, moet daardie element maklik visueel bo-op enigiets anders plaas, met die veronderstelling dat al die verskillende elemente op 'n laer waarde of glad nie gestel is nie. 'n Webblad word gewoonlik in 'n tweedimensionele ruimte voorgestel; deur spesifieke CSS-eienskappe toe te pas, word 'n denkbeeldige z-asvlak egter ingestel om diepte oor te dra. Hierdie vlak is loodreg op die skerm, en daaruit sien die gebruiker die volgorde van elemente, een op die ander. Die idee agter die denkbeeldige z-as, die gebruiker se persepsie van gestapelde elemente, is dat die CSS-eienskappe wat dit skep, kombineer om te vorm wat ons 'n stapelkonteks noem. Ons gaan praat oor hoe elemente op 'n webblad "gestapel" word, wat die stapelvolgorde beheer, en praktiese benaderings om elemente te "ontstapel" wanneer nodig. Oor stapelkontekste Stel jou webblad voor as 'n lessenaar. Soos jy HTML-elemente byvoeg, lê jy stukkies papier, een na die ander, op die lessenaar. Die laaste stuk papier wat geplaas is, is gelykstaande aan die mees onlangs bygevoegde HTML-element, en dit sit bo-op al die ander vraestelle wat daarvoor geplaas is. Dit is die normale dokumentvloei, selfs vir geneste elemente. Die lessenaar self verteenwoordig die wortelstapelingskonteks, gevorm deur die -element, wat alle ander vouers bevat. Nou kom spesifieke CSS-eienskappe ter sprake. Eienskappe soos posisie (met z-indeks), ondeursigtigheid, transformeer en bevat) dien soos 'n gids. Hierdie vouer neem 'n element en al sy kinders, onttrek hulle uit die hoofstapel, en groepeer dit in 'n aparte substapel, en skep wat ons 'n stapelkonteks noem. Vir geposisioneerde elemente gebeur dit wanneer ons 'n z-indekswaarde anders as outomaties verklaar. Vir eienskappe soos ondeursigtigheid, transformasie en filter, word die stapelkonteks outomaties geskep wanneer spesifieke waardes toegepas word.
Probeer dit verstaan: Sodra 'n stuk papier (d.w.s. 'n kinderelement) binne 'n vouer is (d.w.s. die ouer se stapelkonteks), kan dit nooit daardie vouer verlaat of tussen vraestelle in 'n ander vouer geplaas word nie. Sy z-indeks is nou net relevant binne sy eie lêergids.
In die illustrasie hieronder is Vraestel B nou binne die stapelkonteks van Folder B, en kan slegs saam met ander vraestelle in die vouer bestel word.
Stel jou voor, as jy wil, dat jy twee vouers op jou lessenaar het:
.vouer-a { z-indeks: 1; } .vouer-b { z-indeks: 2; }
Kom ons werk die opmaak 'n bietjie op. Binne-lêergids A is 'n spesiale bladsy, z-indeks: 9999. Binne-lêergids B is 'n gewone bladsy, z-indeks: 5.
.spesiale-bladsy { z-indeks: 9999; } .plain-page { z-indeks: 5; }
Watter bladsy is bo-aan? Dit is die .plain-bladsy in Folder B. Die blaaier ignoreer die kinderpapiere en stapel die twee dopgehou eerste. Dit sien gids B (z-indeks: 2) en plaas dit bo-op gids A (z-indeks: 1) omdat ons weet dat twee groter as een is. Intussen is die .special-bladsy wat op z-index: 9999 gestel is onderaan die stapel al is die z-indeks op die hoogste moontlike waarde gestel. Stapelkontekste kan ook geneste word (vouers binne dopgehou), wat 'n "stamboom" skep. Dieselfde beginsel geld: 'n kind kan nooit sy ouers se vouer ontsnap nie. Noudat jy verstaan hoe stapelkontekste optree soos dopgehou wat lae groepeer en herrangskik, is dit die moeite werd om te vra: hoekom skep sekere eienskappe – soos transformasie en ondeursigtigheid – nuwe stapelkontekste? Hier is die ding: hierdie eiendomme skep nie stapelkontekste nie as gevolg van hoe dit lyk; hulle doen dit as gevolg van hoe die blaaier onder die enjinkap werk. Wanneer jy transformasie, ondeursigtigheid, filter of perspektief toepas, sê jy vir die blaaier: "Haai, hierdie element kan dalk beweeg, roteer of vervaag, so wees gereed!"
Wanneer jy hierdie eienskappe gebruik, skep die blaaier 'n nuwe stapelkonteks om lewering meer doeltreffend te bestuur. Dit laat die blaaier toe om animasies, transformasies en visuele effekte onafhanklik te hanteer, wat die behoefte verminder om te herbereken hoe hierdie elemente met die res van die bladsy interaksie het. Dink daaraan as die blaaier wat sê: "Ek sal hierdie vouer afsonderlik hanteer sodat ek nie die hele lessenaar hoef te herskuifel elke keer as iets daarin verander nie." Maar daar is'n newe-effek. Sodra die blaaier 'n element in sy eie laag optel, moet dit alles daarin "plat" maak, wat 'n nuwe stapelkonteks skep. Dit is soos om 'n vouer van die lessenaar af te haal om dit apart te hanteer; alles in daardie vouer word gegroepeer, en die blaaier hanteer dit nou as 'n enkele eenheid wanneer hy besluit wat bo-op wat sit. So alhoewel die transformasie- en ondeursigtigheid-eienskappe dalk nie die manier waarop elemente visueel stapel raak, beïnvloed nie, doen hulle dit, en dit is vir werkverrigtingoptimalisering. Verskeie ander CSS-eienskappe kan om soortgelyke redes ook stapelkontekste skep. MDN verskaf 'n volledige lys as jy dieper wil delf. Daar is 'n hele paar, wat net illustreer hoe maklik dit is om per ongeluk 'n stapelkonteks te skep sonder om dit te weet. Die "Ontstapel"-probleem Stapelprobleme kan om baie redes ontstaan, maar sommige is meer algemeen as ander. Modale komponente is 'n klassieke patroon omdat dit vereis dat die komponent omgeskakel word om op 'n boonste laag bo alle ander elemente te "oop" en dit dan van die boonste laag te verwyder wanneer dit "gesluit" is. Ek is redelik vol vertroue dat almal van ons in 'n situasie beland het waar ons 'n modaal oopmaak en, om watter rede ook al, dit nie verskyn nie. Dit is nie dat dit nie behoorlik oopgemaak het nie, maar dat dit buite sig is in 'n laer laag van die stapelkonteks. Dit laat jou wonder "hoe kom dit?" vandat jy gestel het:
.overlay { posisie: vas; /* skep die stapelkonteks */ z-indeks: 1; /* plaas die element op 'n laag bo alles anders */ inlas: 0; breedte: 100%; hoogte: 100vh; oorloop: verborge; agtergrond-kleur: #00000080; }
Dit lyk korrek, maar as die ouerelement wat die modale sneller bevat 'n kinderelement binne 'n ander ouerelement is wat ook op z-index: 1 gestel is, plaas dit tegnies die modaal in 'n sublaag wat deur die hoofvouer verduister word. Kom ons kyk na daardie spesifieke scenario en 'n paar ander algemene stapel-konteks slaggate. Ek dink jy sal nie net sien hoe maklik dit is om per ongeluk stapelkontekste te skep nie, maar ook hoe om dit te wanbestuur. Hoe jy na 'n bestuurde toestand terugkeer, hang ook af van die situasie. Scenario 1: The Trapped Modal
Jy kan dadelik sien dat jou modaal vasgevang is in 'n lae-vlak laag en die ouer identifiseer. Blaaier-uitbreidings Slim ontwikkelaars het uitbreidings gebou om te help. Gereedskap soos hierdie "CSS Stacking Context Inspector" Chrome-uitbreiding voeg 'n ekstra z-indeks-oortjie by jou DevTools om vir jou inligting te wys oor elemente wat 'n stapelkonteks skep.
IDE-uitbreidings U kan selfs probleme tydens ontwikkeling opspoor met 'n uitbreiding soos hierdie een vir VS-kode, wat potensiële stapelkontekskwessies direk in u redigeerder uitlig.
Ontstapel En Herwin Beheer Nadat ons die oorsaak geïdentifiseer het, is die volgende stap om dit te hanteer. Daar is verskeie benaderings wat u kan volg om hierdie probleem aan te pak, en ek sal hulle in volgorde lys. Jy kan egter enigiemand op enige vlak kies; niemand kan kla of 'n ander hinder nie. Verander die HTML-struktuur Dit word as die optimale oplossing beskou. Vir u om 'n stapelkontekskwessie teë te kom, moes u sommige elemente in snaakse posisies binne u HTML geplaas het. Die herstrukturering van die bladsy sal jou help om die DOM te hervorm en die stapelkonteksprobleem uit te skakel. Vind die problematiese element en verwyder dit uit die vangelement in die HTML-opmerk. Byvoorbeeld, ons kan die eerste scenario, "The Trapped Modal," oplos deur die .modal-houer uit die kop te skuif en dit op sigself in die
-element te plaas.Hierdie inhoud het 'n z-indeks van 2 en sal steeds nie die modaal dek nie.Opskrif
Hoofinhoud
As jy op die "Open Modal"-knoppie klik, word die modal voor alles anders geposisioneer soos dit veronderstel is om te wees. Sien die Pen Scenario 1: The Trapped Modal (Solution) [gevurk] deur Shoyombo Gabriel Ayomide. Pas die aanOuerstapelkonteks in CSS Wat as die element een is wat jy nie kan skuif sonder om die uitleg te breek nie? Dit is beter om die kwessie aan te spreek: die ouer vestig die konteks. Vind die CSS-eiendom (of eiendomme) wat verantwoordelik is vir die aktiveer van die konteks en verwyder dit. As dit 'n doel het en nie verwyder kan word nie, gee die ouer 'n hoër z-indeks waarde as sy broer en suster elemente om die hele houer op te lig. Met 'n hoër z-indekswaarde skuif die ouerhouer na bo, en sy kinders verskyn nader aan die gebruiker. Gebaseer op wat ons in "The Submerged Dropdown"-scenario geleer het, kan ons nie die dropdown uit die navigasiebalk skuif nie; dit sou nie sin maak nie. Ons kan egter die z-indekswaarde van die .navbar-houer verhoog om groter te wees as die .content-element se z-indekswaarde. .navbar { agtergrond: #333; /* z-indeks: 1; */ z-indeks: 3; posisie: relatief; }
Met hierdie verandering verskyn die .dropdown-menu nou sonder enige probleem voor die inhoud.
Sien die Pen Scenario 2: The Submerged Dropdown (Solution) [gevurk] deur Shoyombo Gabriel Ayomide.
Probeer portale as u 'n raamwerk gebruik
In raamwerke soos React of Vue is 'n portaal 'n kenmerk waarmee u 'n komponent buite sy normale ouerhiërargie in die DOM kan weergee. Portale is soos 'n teleportasie-toestel vir jou komponente. Hulle laat jou 'n komponent se HTML op enige plek in die dokument weergee (tipies reg in document.body) terwyl dit logies gekoppel word aan sy oorspronklike ouer vir rekwisiete, toestand en gebeure. Dit is perfek om stapel-konteksstrikke te ontsnap, aangesien die gelewerde uitvoer letterlik buite die problematiese ouerhouer verskyn.
ReactDOM.createPortal(
Dit verseker dat u aftrek-inhoud nie agter sy ouer versteek word nie, selfs al het die ouer oorloop: versteek of 'n laer z-indeks. In die "The Clipped Tooltip"-scenario waarna ons vroeër gekyk het, het ek 'n Portaal gebruik om die tooltip van die oorloop te red: versteekte clip deur dit in die dokumentliggaam te plaas en dit bo die sneller binne die houer te plaas. Sien die Pen Scenario 3: The Clipped Tooltip (Solution) [gevurk] deur Shoyombo Gabriel Ayomide. Stel stapelkonteks bekend sonder newe-effekte Al die benaderings wat in die vorige afdeling verduidelik is, is daarop gemik om elemente uit problematiese stapelkontekste te "ontstapel", maar daar is 'n paar situasies waar jy eintlik 'n stapelkonteks sal nodig hê of wil skep. Dit is maklik om 'n nuwe stapelkonteks te skep, maar alle benaderings het 'n newe-effek. Dit is, behalwe vir die gebruik van isolasie: isoleer. Wanneer dit op 'n element toegepas word, word die stapelkonteks van daardie element se kinders relatief tot elke kind en binne daardie konteks bepaal, eerder as om beïnvloed te word deur elemente daarbuite. 'n Klassieke voorbeeld is om daardie element 'n negatiewe waarde toe te ken, soos z-indeks: -1. Verbeel jou jy het 'n .card-komponent. Jy wil 'n dekoratiewe vorm byvoeg wat agter die .card se teks sit, maar bo-op die kaart se agtergrond. Sonder 'n stapelkonteks op die kaart, stuur z-indeks: -1 die vorm na die onderkant van die wortelstapelkonteks (die hele bladsy). Dit laat dit agter die .card se wit agtergrond verdwyn: Sien die Pen Negatiewe z-indeks (probleem) [gevurk] deur Shoyombo Gabriel Ayomide. Om dit op te los, verklaar ons isolasie: isoleer op die ouer .card: Sien die Pen Negatiewe z-indeks (oplossing) [gevurk] deur Shoyombo Gabriel Ayomide. Nou word die .card-element self 'n stapelkonteks. Wanneer sy kinderelement - die dekoratiewe vorm wat op die :before pseudo-element geskep word - z-indeks: -1 het, gaan dit heel onder in die ouer se stapelkonteks. Dit sit perfek agter die teks en bo-op die kaart se agtergrond, soos bedoel. Gevolgtrekking Onthou: die volgende keer wat jou z-indeks buite beheer lyk, is dit 'n vasgevange stapelkonteks. Verwysings
Stapelkonteks (MDN) Z-indeks en stapelkontekste (web.dev) "Hoe om 'n nuwe stapelkonteks te skep met die isolasie-eiendom in CSS", Natalie Pina "What the Heck, z-indeks?", Josh Comeau
Verdere leeswerk oor SmashingMag
"Bestuur van CSS Z-indeks in groot projekte", Steven Frieson "Klewerige koppe en elemente op volle hoogte: 'n moeilike kombinasie", Philip Braunen "Bestuur van Z-indeks in 'n komponent-gebaseerde webtoepassing", Pavel Pomerantsev "Die Z-Index CSS Property: A Comprehensive Look", Louis Lazaris
