Vai esat kādreiz iestatījis z-index: 99999 elementam savā CSS, un tas netiek parādīts virs citiem elementiem? Vērtībai, kas ir tik liela, šis elements vizuāli jānovieto virs jebkura cita, pieņemot, ka visiem dažādajiem elementiem ir iestatīta mazāka vērtība vai nav iestatīta vispār. Tīmekļa lapa parasti tiek attēlota divdimensiju telpā; tomēr, izmantojot īpašas CSS īpašības, tiek ieviesta iedomāta z-ass plakne, lai pārraidītu dziļumu. Šī plakne ir perpendikulāra ekrānam, un no tās lietotājs uztver elementu secību viens virs otra. Ideja, kas slēpjas aiz iedomātās z ass, kas ir lietotāja uztvere par sakrautiem elementiem, ir tāda, ka CSS īpašības, kas to rada, apvienojas, veidojot to, ko mēs saucam par sakraušanas kontekstu. Mēs runāsim par to, kā elementi tiek “sakrauti” tīmekļa lapā, kas kontrolē sakraušanas secību, un praktiskām pieejām elementu “izkraušanai”, kad tas ir nepieciešams. Par kontekstu sakraušanu Iedomājieties savu tīmekļa lapu kā galdu. Pievienojot HTML elementus, jūs vienu pēc otras klājat uz galda papīra lapas. Pēdējā ievietotā papīra gabals ir līdzvērtīgs nesen pievienotajam HTML elementam, un tas atrodas virs visiem pārējiem papīriem, kas novietoti pirms tā. Šī ir parastā dokumentu plūsma pat ligzdotiem elementiem. Pati galds attēlo saknes sakņu kārtošanas kontekstu, ko veido elements , kurā ir visas pārējās mapes. Tagad tiek izmantoti īpaši CSS rekvizīti. Rekvizīti, piemēram, pozīcija (ar z-indeksu), necaurredzamība, transformācija un saturs, darbojas kā mape. Šī mape ņem elementu un visus tā atvasinājumus, izvelk tos no galvenās steka un sagrupē atsevišķā apakšstekā, izveidojot tā saukto kraušanas kontekstu. Pozicionētiem elementiem tas notiek, ja mēs deklarējam z indeksa vērtību, kas nav automātiska. Rekvizītiem, piemēram, necaurredzamība, pārveidošana un filtrs, sakraušanas konteksts tiek izveidots automātiski, kad tiek lietotas noteiktas vērtības.
Mēģiniet to saprast: ja papīra gabals (t.i., pakārtotais elements) atrodas mapē (t.i., vecāka sakraušanas kontekstā), tas nekad nevar iziet no šīs mapes vai tikt ievietots starp papīriem citā mapē. Tā z-indekss tagad ir svarīgs tikai tās mapē.
Tālāk redzamajā ilustrācijā papīrs B tagad atrodas mapes B sakraušanas kontekstā, un to var pasūtīt tikai kopā ar citiem papīriem mapē.
Ja vēlaties, iedomājieties, ka uz jūsu galda ir divas mapes:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Nedaudz atjaunināsim marķējumu. Mapes A iekšpusē ir īpaša lapa, z indekss: 9999. Mapes B iekšpusē ir vienkārša lapa, z indekss: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Kura lapa ir augšpusē? Tā ir .plain-lapa mapē B. Pārlūkprogramma ignorē pakārtotos dokumentus un vispirms saliek abas mapes. Tas redz mapi B (z-indekss: 2) un novieto to virs mapes A (z-indekss: 1), jo mēs zinām, ka divi ir lielāki par vienu. Tikmēr .special-lapa, kas iestatīta uz z-index: 9999 lapa atrodas kaudzes apakšā, lai gan tās z-indekss ir iestatīts uz visaugstāko iespējamo vērtību. Kraušanas kontekstus var arī ligzdot (mapes mapēs), izveidojot “ģimenes koku”. Tas pats princips: bērns nekad nevar izvairīties no vecāku mapes. Tagad, kad esat sapratis, kā sakraušanas konteksti darbojas kā mapes, kas grupē un pārkārto slāņus, ir vērts jautāt: kāpēc noteikti rekvizīti, piemēram, transformācija un necaurredzamība, rada jaunus sakraušanas kontekstus? Lūk, lieta: šie rekvizīti nerada sakraušanas kontekstus to izskata dēļ; viņi to dara, jo pārlūkprogramma darbojas zem pārsega. Lietojot transformāciju, necaurredzamību, filtru vai perspektīvu, jūs sakāt pārlūkprogrammai: “Hei, šis elements var pārvietoties, pagriezties vai izbalināt, tāpēc esiet gatavs!”
Kad izmantojat šos rekvizītus, pārlūkprogramma izveido jaunu sakraušanas kontekstu, lai efektīvāk pārvaldītu renderēšanu. Tas ļauj pārlūkprogrammai neatkarīgi apstrādāt animācijas, transformācijas un vizuālos efektus, tādējādi samazinot nepieciešamību pārrēķināt šo elementu mijiedarbību ar pārējo lapu. Uztveriet to tā, it kā pārlūkprogramma saka: "Es apstrādāšu šo mapi atsevišķi, lai man nebūtu jāpārkārto viss galds katru reizi, kad tajā kaut kas mainās." Bet irblakusparādība. Kad pārlūkprogramma paceļ elementu savā slānī, tai ir “jāizlīdzina” viss tajā esošais, radot jaunu sakraušanas kontekstu. Tas ir tāpat kā mapes noņemšana no galda, lai to apstrādātu atsevišķi; viss, kas atrodas šajā mapē, tiek sagrupēts, un pārlūkprogramma tagad to uzskata par vienu vienību, lemjot par to, kas atrodas virsū. Tātad, lai gan šķiet, ka transformācijas un necaurredzamības rekvizīti neietekmē veidu, kā elementi tiek vizuāli sakrauti, tie to dara, un tas ir paredzēts veiktspējas optimizēšanai. Vairāki citi CSS rekvizīti līdzīgu iemeslu dēļ var izveidot arī sakraušanas kontekstus. Ja vēlaties iedziļināties, MDN nodrošina pilnu sarakstu. To ir diezgan daudz, kas tikai ilustrē, cik viegli ir netīši izveidot sakraušanas kontekstu, to nezinot. “Izkraušanas” problēma Kraušanas problēmas var rasties daudzu iemeslu dēļ, taču daži no tiem ir biežāk nekā citi. Modālie komponenti ir klasisks modelis, jo tiem ir nepieciešams pārslēgt komponentu, lai tas būtu “atvērts” augšējā slānī virs visiem citiem elementiem, un pēc tam noņemt to no augšējā slāņa, kad tas ir “aizvērts”. Esmu diezgan pārliecināts, ka mēs visi esam nonākuši situācijā, kad atveram modālu un kāda iemesla dēļ tas neparādās. Tas nenozīmē, ka tas nav pareizi atvērts, bet gan tas, ka tas nav redzams sakraušanas konteksta apakšējā slānī. Tas liek jums aizdomāties "kā tas tā ir?" kopš iestatījāt:
.overlay { pozīcija: fiksēta; /* izveido sakraušanas kontekstu */ z-indekss: 1; /* ievieto elementu slānī virs visa pārējā */ ielaidums: 0; platums: 100%; augstums: 100vh; pārplūde: slēpta; fona krāsa: #00000080; }
Tas izskatās pareizi, taču, ja vecākelements, kas satur modālo aktivizētāju, ir bērnelements citā vecākelementā, kuram arī ir iestatīts z-indekss: 1, tas tehniski novieto modālu apakšslānī, ko aizsedz galvenā mape. Apskatīsim šo konkrēto scenāriju un dažas citas izplatītas sakraušanas konteksta nepilnības. Es domāju, ka jūs redzēsit ne tikai to, cik viegli ir netīši izveidot sakraušanas kontekstus, bet arī to, kā tos nepareizi pārvaldīt. Arī tas, kā jūs atgriezīsities pārvaldītā stāvoklī, ir atkarīgs no situācijas. 1. scenārijs: Trapped Modal
Jūs varat uzreiz redzēt, ka jūsu modāls ir iesprostots zema līmeņa slānī, un identificēt vecāku. Pārlūka paplašinājumi Gudri izstrādātāji ir izveidojuši paplašinājumus, lai palīdzētu. Tādi rīki kā šis Chrome paplašinājums “CSS Stacking Context Inspector” jūsu DevTools pievieno papildu z-index cilni, lai parādītu informāciju par elementiem, kas veido sakraušanas kontekstu.
IDE paplašinājumi Jūs pat varat pamanīt problēmas izstrādes laikā, izmantojot tādu paplašinājumu kā šis VS Code, kas izceļ iespējamās konteksta problēmas, kas saistītas ar sakraušanu tieši jūsu redaktorā.
Izkraušana un kontroles atgūšana Kad esam identificējuši galveno cēloni, nākamais solis ir to novērst. Šīs problēmas risināšanai varat izmantot vairākas pieejas, un es tos uzskaitīšu secībā. Tomēr jūs varat izvēlēties ikvienu jebkurā līmenī; neviens nevar sūdzēties vai traucēt citam. Mainiet HTML struktūru Tas tiek uzskatīts par optimālo labojumu. Lai jūs varētu saskarties ar sakraušanas konteksta problēmu, daži elementi ir jāievieto smieklīgās pozīcijās savā HTML. Lapas pārstrukturēšana palīdzēs pārveidot DOM un novērst sakraušanas konteksta problēmu. Atrodiet problemātisko elementu un noņemiet to no slazdošanas elementa HTML marķējumā. Piemēram, mēs varam atrisināt pirmo scenāriju “The Trapped Modal”, pārvietojot .modal-konteineru no galvenes un ievietojot to elementā
.Šim saturam ir z-indekss 2, un tas joprojām neattieksies uz modālu.Galvene
Galvenais saturs
Noklikšķinot uz pogas “Atvērt modālu”, modāls tiek novietots visa pārējā priekšā, kā tam vajadzētu būt. Skatiet 1. pildspalvas scenāriju: Ieslodzījuma veids (risinājums), ko izveidojis Šojombo Gabriels Aiomīds. PielāgojietVecāku sakraušanas konteksts CSS Ko darīt, ja elements ir tāds, kuru nevar pārvietot, nepārkāpjot izkārtojumu? Labāk ir risināt šo problēmu: vecāks nosaka kontekstu. Atrodiet CSS rekvizītu (vai rekvizītus), kas ir atbildīgi par konteksta aktivizēšanu, un noņemiet to. Ja tam ir nolūks un to nevar noņemt, piešķiriet vecākajam z-indeksam lielāku vērtību nekā tā brāļiem elementiem, lai paceltu visu konteineru. Ja z indeksa vērtība ir augstāka, vecākkonteineris tiek pārvietots uz augšu, un tā atvasinājumi lietotājam tiek parādīti tuvāk. Pamatojoties uz to, ko uzzinājām scenārijā “Iegremdētā nolaižamā izvēlne”, mēs nevaram pārvietot nolaižamo izvēlni no navigācijas joslas. tam nebūtu jēgas. Tomēr mēs varam palielināt .navbar konteinera z-index vērtību, lai tā būtu lielāka par elementa .content z-index vērtību. .navbar { fons: #333; /* z-indekss: 1; */ z-indekss: 3; pozīcija: relatīvs; }
Pateicoties šīm izmaiņām, satura priekšā bez problēmām tiek parādīta nolaižamā izvēlne.
Skatiet 2. pildspalvas scenāriju: Iegremdētā nolaižamā izvēlne (risinājums), ko izveidojis Shoyombo Gabriel Ayomide.
Izmēģiniet portālus, ja izmantojat ietvaru
Tādos ietvaros kā React vai Vue portāls ir līdzeklis, kas ļauj atveidot komponentu ārpus tā parastās vecākhierarhijas DOM. Portāli ir kā jūsu komponentu teleportācijas ierīce. Tie ļauj atveidot komponenta HTML jebkur dokumentā (parasti tieši dokumentā document.body), vienlaikus saglabājot to loģiski savienotu ar tā sākotnējo vecāku, lai nodrošinātu rekvizītus, stāvokli un notikumus. Tas ir lieliski piemērots, lai izvairītos no sakraušanas konteksta slazdiem, jo renderētā izvade burtiski parādās ārpus problemātiskā vecākkonteinera.
ReactDOM.createPortal(
Tas nodrošina, ka jūsu nolaižamā saraksta saturs netiek paslēpts aiz tā vecākvirsmas, pat ja vecākam ir pārpilde: slēpts vai zemāks z indekss. Iepriekš aplūkotajā scenārijā “Apgrieztais rīka padoms” es izmantoju portālu, lai glābtu rīka padomu no pārpildes: slēpts klips, ievietojot to dokumenta pamattekstā un novietojot to virs sprūda konteinerā. Skatiet pildspalvas 3. scenāriju: apgrieztais rīka padoms (risinājums), ko izveidojis Šojombo Gabriels Aiomīds. Iepazīstinām ar sakraušanas kontekstu bez blakusparādībām Visas iepriekšējā sadaļā aprakstītās pieejas ir paredzētas elementu “atvienošanai” no problemātiskā sakraušanas konteksta, taču ir dažas situācijas, kurās jums patiešām būs nepieciešams vai vēlaties izveidot sakraušanas kontekstu. Jauna sakraušanas konteksta izveide ir vienkārša, taču visām pieejām ir blakusefekts. Tas ir, izņemot izolācijas izmantošanu: izolēt. Lietojot elementam, šī elementa atvasinājumu konteksts tiek noteikts attiecībā pret katru bērnu un šajā kontekstā, nevis tiek ietekmēts ārpus tā esošiem elementiem. Klasisks piemērs ir negatīvas vērtības piešķiršana šim elementam, piemēram, z-indekss: -1. Iedomājieties, ka jums ir .card komponents. Jūs vēlaties pievienot dekoratīvu formu, kas atrodas aiz .card teksta, bet virs kartītes fona. Ja kartītē nav ietverts grupēšanas konteksts, z-index: -1 nosūta formu uz saknes kārtošanas konteksta apakšdaļu (visu lapu). Tādējādi tas pazūd aiz .card baltā fona: Skatiet pildspalvas negatīvo z-indeksu (problēma), ko izveidojis Shoyombo Gabriel Ayomide. Lai to atrisinātu, mēs pasludinām izolāciju: izolēt vecāku .card: Skatiet Shoyombo Gabriel Ayomide Pen Negative z-indeksu (risinājumu) [dakšveida]. Tagad pats .card elements kļūst par sakraušanas kontekstu. Ja tā pakārtotajam elementam — dekoratīvajai formai, kas izveidota pseidoelementā :before — ir z indekss: -1, tas iet uz pašu vecākgrupas konteksta apakšdaļu. Tas lieliski atrodas aiz teksta un kartītes fona augšpusē, kā paredzēts. Secinājums Atcerieties: nākamreiz, kad jūsu z-indekss šķiet nekontrolējams, tas ir iesprostots grupēšanas konteksts. Atsauces
Kraušanas konteksts (MDN) Z-indekss un sakraušanas konteksti (web.dev) “Kā izveidot jaunu sakraušanas kontekstu ar izolācijas īpašumu CSS”, Natālija Pīna "Kas pie velna, z-indekss?", Džošs Komo
Papildu lasīšana vietnē SmashingMag
“CSS Z-indeksa pārvaldība lielos projektos”, Stīvens Frīsons “Lipīgas galvenes un pilna augstuma elementi: viltīga kombinācija”, Filips Braunens “Z-indeksa pārvaldība uz komponentiem balstītā tīmekļa lietojumprogrammā”, Pāvels Pomerancevs "Z-Index CSS īpašums: visaptverošs izskats", Louis Lazaris
