Oletko koskaan asettanut z-indeksin: 99999 CSS:n elementille, eikä se tule muiden elementtien päälle? Näin suuren arvon pitäisi helposti sijoittaa kyseinen elementti visuaalisesti kaiken muun päälle, olettaen, että kaikki eri elementit on asetettu joko pienempään arvoon tai niitä ei ole asetettu ollenkaan. Verkkosivu esitetään yleensä kaksiulotteisessa avaruudessa; kuitenkin käyttämällä tiettyjä CSS-ominaisuuksia, kuvitteellinen z-akselin taso otetaan käyttöön syvyyden välittämiseksi. Tämä taso on kohtisuorassa näyttöön nähden, ja siitä käyttäjä näkee elementtien järjestyksen päällekkäin. Ideana kuvitteellisen z-akselin, käyttäjän käsityksen pinotuista elementeistä, takana on, että sen luovat CSS-ominaisuudet yhdistyvät pinoamiskontekstiksi. Aiomme puhua siitä, kuinka elementit "pinotaan" verkkosivulle, mikä ohjaa pinoamisjärjestystä ja käytännön lähestymistapoja elementtien "purkaamiseen" tarvittaessa. Kontekstien pinoamisesta Kuvittele verkkosivusi työpöydäksi. Kun lisäät HTML-elementtejä, asetat paperinpalat yksi toisensa jälkeen pöydälle. Viimeinen asetettu paperi vastaa viimeksi lisättyä HTML-elementtiä, ja se istuu kaikkien muiden sitä edeltävien paperien päällä. Tämä on normaali asiakirjakulku, jopa sisäkkäisillä elementeillä. Itse työpöytä edustaa pääpinoamiskontekstia, joka muodostuu -elementistä, joka sisältää kaikki muut kansiot. Nyt tietyt CSS-ominaisuudet tulevat peliin. Ominaisuudet, kuten sijainti (z-indeksillä), peittävyys, muunnos ja sisältö) toimivat kuin kansio. Tämä kansio ottaa elementin ja kaikki sen alat, poimii ne pääpinosta ja ryhmittelee ne erilliseen alipinoon, luoden pinoamiskontekstin. Sijoitetuille elementeille tämä tapahtuu, kun ilmoitamme muun z-indeksin arvon kuin auto. Ominaisuuksille, kuten peittävyys, muunnos ja suodatin, pinoamiskonteksti luodaan automaattisesti, kun tiettyjä arvoja käytetään.
Yritä ymmärtää tämä: Kun paperinpala (eli alielementti) on kansion sisällä (eli ylätason pinoamiskontekstissa), se ei voi koskaan poistua kansiosta tai sijoittaa paperien väliin eri kansiossa. Sen z-indeksi on nyt merkityksellinen vain sen oman kansion sisällä.
Alla olevassa kuvassa paperi B on nyt kansion B pinoamiskontekstissa, ja sitä voi tilata vain kansiossa olevien muiden papereiden kanssa.
Kuvittele, jos haluat, että sinulla on kaksi kansiota työpöydälläsi:
.folder-a { z-indeksi: 1; } .folder-b { z-indeksi: 2; }
Päivitetään hieman merkintää. Kansion A sisällä on erikoissivu, z-indeksi: 9999. Kansion B sisällä on tavallinen sivu, z-indeksi: 5.
.special-page { z-indeksi: 9999; } .plain-page { z-indeksi: 5; }
Mikä sivu on ylhäällä? Se on kansion B .plain-sivu. Selain ei huomioi alatason paperit ja pinoaa kaksi kansiota ensin. Se näkee kansion B (z-indeksi: 2) ja asettaa sen kansion A päälle (z-indeksi: 1), koska tiedämme, että kaksi on suurempi kuin yksi. Sillä välin .special-sivu, jonka arvoksi on asetettu z-indeksi: 9999, on pinon alaosassa, vaikka sen z-indeksi on asetettu korkeimpaan mahdolliseen arvoon. Pinoamiskontekstit voidaan myös sisäkkäin (kansioiden sisällä olevat kansiot), jolloin luodaan "sukupuu". Sama periaate pätee: lapsi ei voi koskaan paeta vanhempiensa kansiosta. Nyt kun ymmärrät, kuinka pinottavat kontekstit toimivat kansioiden tavoin, jotka ryhmittelevät ja järjestävät tasoja uudelleen, kannattaa kysyä: miksi tietyt ominaisuudet – kuten muunnos ja läpinäkyvyys – luovat uusia pinoamiskonteksteja? Asia on tässä: nämä ominaisuudet eivät luo pinoamiskonteksteja niiden ulkoasun vuoksi. he tekevät sen, koska selain toimii konepellin alla. Kun käytät muunnosa, peittävyyttä, suodatinta tai perspektiiviä, sanot selaimelle: "Hei, tämä elementti saattaa liikkua, pyöriä tai haalistua, joten ole valmis!"
Kun käytät näitä ominaisuuksia, selain luo uuden pinoamiskontekstin hallitakseen hahmonnusta tehokkaammin. Tämän ansiosta selain voi käsitellä animaatioita, muunnoksia ja visuaalisia tehosteita itsenäisesti, mikä vähentää tarvetta laskea uudelleen näiden elementtien vuorovaikutusta sivun muun osan kanssa. Ajattele sitä niin, että selain sanoo: "Hoitan tätä kansiota erikseen, jotta minun ei tarvitse muuttaa koko työpöytää aina, kun jokin sen sisällä muuttuu." Mutta siellä onsivuvaikutus. Kun selain nostaa elementin omalle tasolleen, sen on "litistettävä" kaikki sen sisällä luoden uusi pinoamiskonteksti. Se on kuin ottaisi kansion pöydältä käsitelläksesi sitä erikseen. kaikki kansion sisällä ryhmitellään, ja selain käsittelee sitä nyt yhtenä yksikkönä päättäessään, mikä on minkä päällä. Joten vaikka muunnos- ja peittävyysominaisuudet eivät näytä vaikuttavan tapaan, jolla elementit pinoutuvat visuaalisesti, ne vaikuttavat, ja se on suorituskyvyn optimointia varten. Useat muut CSS-ominaisuudet voivat myös luoda pinoamiskonteksteja samoista syistä. MDN tarjoaa täydellisen luettelon, jos haluat kaivaa syvemmälle. Niitä on melko vähän, mikä vain havainnollistaa, kuinka helppoa on vahingossa luoda pinoamiskonteksti tietämättään. "Puraus" -ongelma Pinoamisongelmia voi syntyä monista syistä, mutta jotkut ovat yleisempiä kuin toiset. Modaaliset komponentit ovat klassinen kuvio, koska ne edellyttävät komponentin "aukeamista" yläkerroksella kaikkien muiden elementtien yläpuolella ja sen poistamista yläkerroksesta, kun se on "suljettu". Olen melko varma, että me kaikki olemme joutuneet tilanteeseen, jossa avaamme modaalin, ja jostain syystä se ei ilmesty. Kyse ei ole siitä, että se ei avautunut kunnolla, vaan siitä, että se on poissa näkyvistä pinoamiskontekstin alemmassa kerroksessa. Tämä jättää sinut miettimään "miten niin?" koska asetit:
.overlay { asento: kiinteä; /* luo pinoamiskontekstin */ z-indeksi: 1; /* asettaa elementin tasolle kaiken muun yläpuolelle */ upotettu: 0; leveys: 100 %; korkeus: 100vh; ylivuoto: piilotettu; taustaväri: #00000080; }
Tämä näyttää oikealta, mutta jos modaalilaukaisimen sisältävä pääelementti on alielementti toisessa pääelementissä, joka on myös asetettu z-indeksiin: 1, tämä sijoittaa modaalin teknisesti pääkansion peittämään alikerrokseen. Katsotaanpa tätä skenaariota ja pari muuta yleistä pinoamiskontekstin sudenkuoppaa. Uskon, että tulet näkemään paitsi kuinka helppoa pinoamiskontekstien luominen on vahingossa, myös kuinka niitä voi hallita väärin. Myös tapa, jolla palaat hallittuun tilaan, riippuu tilanteesta. Skenaario 1: The Trapped Modal
Voit välittömästi nähdä modaalisi loukkuun matalan tason kerrokseen ja tunnistaa vanhemman. Selainlaajennukset Älykkäät kehittäjät ovat rakentaneet laajennuksia auttamaan. Tämän Chrome-laajennuksen "CSS Stacking Context Inspector" kaltaiset työkalut lisäävät DevToolsiin ylimääräisen z-indeksivälilehden, joka näyttää tietoja elementeistä, jotka luovat pinoamiskontekstin.
IDE-laajennukset Voit jopa havaita ongelmia kehityksen aikana tämän kaltaisella VS Coden laajennuksella, joka korostaa mahdollisia pinoamiskontekstin ongelmia suoraan editorissasi.
Purkaminen ja hallinnan palauttaminen Kun olemme tunnistaneet perimmäisen syyn, seuraava askel on käsitellä sitä. Voit ratkaista tämän ongelman useilla tavoilla, ja luettelen ne järjestyksessä. Voit kuitenkin valita kenet tahansa millä tahansa tasolla; kukaan ei voi valittaa tai estää toista. Muuta HTML-rakennetta Tätä pidetään optimaalisena korjauksena. Jotta voit törmätä pinoamiskontekstiongelmaan, sinun on täytynyt sijoittaa joitain elementtejä hauskoihin paikkoihin HTML-koodissasi. Sivun uudelleenjärjestely auttaa muotoilemaan DOM:n uudelleen ja poistamaan pinoamiskontekstin ongelman. Etsi ongelmallinen elementti ja poista se HTML-merkinnän trapping-elementistä. Voimme esimerkiksi ratkaista ensimmäisen skenaarion, "The Trapped Modal", siirtämällä .modal-containerin pois otsikosta ja sijoittamalla sen
-elementtiin yksinään.Tämän sisällön z-indeksi on 2, eikä se silti kata modaalia.Otsikko
Pääsisältö
Kun napsautat "Avaa modaali" -painiketta, modaali sijoittuu kaiken muun eteen niin kuin sen pitäisi olla. Katso Shoyombo Gabriel Ayomiden kynäskenaario 1: The Trapped Modal (Ratkaisu) [haarukka]. SäädäPääpinoamiskonteksti CSS:ssä Entä jos elementti on sellainen, jota ei voi siirtää rikkomatta asettelua? On parempi käsitellä asiaa: vanhempi määrittää kontekstin. Etsi kontekstin käynnistämisestä vastaava CSS-ominaisuus (tai ominaisuudet) ja poista se. Jos sillä on tarkoitus ja sitä ei voida poistaa, anna ylätason z-indeksiarvo suurempi kuin sen sisarelementit nostaaksesi koko kontin. Suuremmalla z-indeksin arvolla ylätason säilö siirtyy yläosaan, ja sen alat näkyvät lähempänä käyttäjää. Sen perusteella, mitä opimme "The Submerged Dropdown" -skenaariossa, emme voi siirtää avattavaa valikkoa pois navigointipalkista. siinä ei olisi järkeä. Voimme kuitenkin nostaa .navbar-säilön z-indeksin arvon suuremmaksi kuin .content-elementin z-indeksin arvo. .navbar { tausta: #333; /* z-indeksi: 1; */ z-indeksi: 3; asema: suhteellinen; }
Tämän muutoksen myötä .pudotusvalikko tulee nyt ilman ongelmia sisällön eteen.
Katso Shoyombo Gabriel Ayomiden kynän skenaario 2: The Submerged Dropdown (ratkaisu) [haarukka].
Kokeile portaaleja, jos käytät kehystä
Kehyksissä, kuten React tai Vue, portaali on ominaisuus, jonka avulla voit renderöidä komponentin normaalin ylähierarkian ulkopuolella DOM:ssa. Portaalit ovat kuin teleportaatiolaite komponenteillesi. Niiden avulla voit renderöidä komponentin HTML-koodin missä tahansa asiakirjassa (yleensä suoraan document.body-tiedostoon) pitäen samalla sen loogisesti yhteydessä alkuperäiseen yläpäähän rekvisiitta, tilaa ja tapahtumia varten. Tämä sopii erinomaisesti pinoavien kontekstiloukkujen välttämiseen, koska renderöity tulos näkyy kirjaimellisesti ongelmallisen pääsäiliön ulkopuolella.
ReactDOM.createPortal(
Tämä varmistaa, että avattava sisältö ei ole piilossa ylätasonsa taakse, vaikka ylätason sisältö olisi ylivuoto: piilotettu tai alempi z-indeksi. Aiemmin tarkastelemassamme "leikatun työkaluvihjeen" skenaariossa pelastin työkaluvihjeen ylivuodosta portaalin avulla: piilotin leikkeen asettamalla sen asiakirjan runkoon ja sijoittamalla sen laukaisimen yläpuolelle säilössä. Katso Shoyombo Gabriel Ayomiden kynän skenaario 3: leikattu työkaluvihje (ratkaisu) [haarukka]. Esittelyssä pinoamiskonteksti ilman sivuvaikutuksia Kaikki edellisessä osiossa selostetut lähestymistavat on tarkoitettu elementtien "purkaamiseen" ongelmallisista pinoamiskonteksteista, mutta joissakin tilanteissa joudut itse asiassa tai haluat luoda pinoamiskontekstin. Uuden pinoamiskontekstin luominen on helppoa, mutta kaikilla lähestymistavoilla on sivuvaikutus. Eli eristyksen käyttöä lukuun ottamatta: eristä. Kun sitä sovelletaan elementtiin, kyseisen elementin lasten pinoamiskonteksti määritetään suhteessa jokaiseen lapseen ja kyseisessä kontekstissa sen sijaan, että siihen vaikuttaisivat sen ulkopuoliset elementit. Klassinen esimerkki on antaa tälle elementille negatiivinen arvo, kuten z-indeksi: -1. Kuvittele, että sinulla on .card-komponentti. Haluat lisätä koristeellisen muodon, joka sijaitsee .card-tekstin takana, mutta kortin taustan päällä. Ilman pinoamiskontekstia kortilla z-index: -1 lähettää muodon pääpinoamiskontekstin alaosaan (koko sivu). Tämä saa sen katoamaan .cardin valkoisen taustan taakse: Katso Shoyombo Gabriel Ayomiden Pen Negative z-indeksi (ongelma) [haarukka]. Tämän ratkaisemiseksi julistamme isolation: isolate vanhemmassa .cardissa: Katso Shoyombo Gabriel Ayomiden Pen Negative z-indeksi (liuos) [haarukka]. Nyt itse .card-elementistä tulee pinoamiskonteksti. Kun sen alielementillä – :before pseudoelementille luodulla koristeellisella muodolla – on z-indeksi: -1, se menee ylätason pinoamiskontekstin alaosaan. Se istuu täydellisesti tekstin taakse ja kortin taustan päälle, kuten on tarkoitettu. Johtopäätös Muista: kun seuraavan kerran z-indeksisi vaikuttaa käsistä, se on loukkuun jäänyt pinoamiskonteksti. Viitteet
Pinoamiskonteksti (MDN) Z-indeksi ja pinoamiskontekstit (web.dev) "Kuinka luodaan uusi pinoamiskonteksti CSS:n eristysominaisuuden kanssa", Natalie Pina "Mitä ihmettä, z-indeksi?", Josh Comeau
Lisätietoa SmashingMagista
"CSS Z-indeksin hallinta suurissa projekteissa", Steven Frieson "Tauvat otsikot ja täyskorkeat elementit: hankala yhdistelmä", Philip Braunen "Z-indeksin hallinta komponenttipohjaisessa verkkosovelluksessa", Pavel Pomerantsev "Z-indeksin CSS-ominaisuus: kattava ilme", Louis Lazaris
