Qatt waqqaft z-index: 99999 fuq element fis-CSS tiegħek, u ma joħroġx fuq elementi oħra? Valur daqshekk kbir għandu faċilment ipoġġi dak l-element viżwalment fuq kull ħaġa oħra, jekk wieħed jassumi li l-elementi differenti kollha huma stabbiliti jew f'valur aktar baxx jew ma ssettjati xejn. Webpage hija ġeneralment rappreżentata fi spazju bidimensjonali; madankollu, billi jiġu applikati proprjetajiet CSS speċifiċi, pjan immaġinarju tal-assi z jiġi introdott biex iwassal il-fond. Dan il-pjan huwa perpendikolari għall-iskrin, u minnu, l-utent jipperċepixxi l-ordni tal-elementi, wieħed fuq l-ieħor. L-idea wara l-assi z immaġinarju, il-perċezzjoni tal-utent ta 'elementi f'munzelli, hija li l-proprjetajiet CSS li joħolquha jingħaqdu biex jiffurmaw dak li nsejħu kuntest ta' stivar. Se nitkellmu dwar kif l-elementi huma "stivati" fuq paġna tal-web, x'jikkontrolla l-ordni tal-istivar, u approċċi prattiċi biex "unstack" elementi meta meħtieġ. Dwar Kuntesti ta' Stacking Immaġina l-paġna web tiegħek bħala desk. Hekk kif iżżid elementi HTML, tkun qed tpoġġi biċċiet tal-karti, wieħed wara l-ieħor, fuq l-iskrivanija. L-aħħar biċċa karta mqiegħda hija ekwivalenti għall-element HTML miżjud l-aktar reċentement, u tiltaqa 'fuq il-karti l-oħra kollha mqiegħda quddiemha. Dan huwa l-fluss normali tad-dokumenti, anke għall-elementi nested. L-iskrivanija nnifisha tirrappreżenta l-kuntest tal-istivar tal-għeruq, iffurmat mill-element , li fih il-folders l-oħra kollha. Issa, jidħlu fis-seħħ proprjetajiet speċifiċi tas-CSS. Proprjetajiet bħall-pożizzjoni (b'indiċi z), l-opaċità, it-trasformazzjoni u l-kontenut) jaġixxu bħal folder. Dan il-folder jieħu element u t-tfal kollha tiegħu, estrattihom mill-munzell prinċipali, u jiġborhom f'sub-munzell separat, u joħloq dak li nsejħu kuntest ta' stivar. Għal elementi pożizzjonati, dan jiġri meta niddikjaraw valur ta 'z-index minbarra auto. Għal proprjetajiet bħall-opaċità, it-trasformazzjoni u l-iffiltrar, il-kuntest tal-istivar jinħoloq awtomatikament meta jiġu applikati valuri speċifiċi.
Ipprova tifhem dan: Ladarba biċċa karta (jiġifieri, element tifel) tkun ġewwa folder (jiġifieri, il-kuntest ta 'stivar tal-ġenitur), qatt ma tista' toħroġ minn dak il-folder jew titqiegħed bejn karti f'folder differenti. L-indiċi z tiegħu issa huwa rilevanti biss fil-folder tiegħu stess.
Fl-illustrazzjoni hawn taħt, il-Karta B issa tinsab fil-kuntest tal-istivar tal-Folder B, u tista 'tiġi ordnata biss b'karti oħra fil-folder.
Immaġina, jekk trid, li għandek żewġ folders fuq l-iskrivanija tiegħek:
.folder-a { indiċi z: 1; } .folder-b { indiċi z: 2; }
Ejja naġġornaw ftit il-markup. Inside Folder A hija paġna speċjali, z-index: 9999. Inside Folder B hija paġna sempliċi, z-index: 5.
.special-page { z-index: 9999; } .paġni sempliċi { indiċi z: 5; }
Liema paġna tinsab fuq nett? Hija l-.plain-page fil-Folder B. Il-brawżer jinjora l-karti tat-tfal u l-ewwel jimmonta ż-żewġ folders. Ara l-Folder B (z-indiċi: 2) u jpoġġiha fuq il-Folder A (z-index: 1) għax nafu li tnejn huma akbar minn wieħed. Sadanittant, il-.special-page issettjat għal z-index: 9999 paġna tinsab fil-qiegħ tal-munzell minkejja li l-z-index tagħha huwa ssettjat għall-ogħla valur possibbli. Il-kuntesti tal-istivar jistgħu wkoll jiġu mdaħħla (folders ġewwa folders), u joħolqu "siġra tal-familja." L-istess prinċipju japplika: tifel qatt ma jista’ jaħrab il-folder tal-ġenituri tiegħu. Issa li tikseb kif il-kuntesti ta 'stacking jaġixxu bħal folders li jiġbru u jordnaw mill-ġdid is-saffi, ta' min jistaqsi: għaliex ċerti proprjetajiet - bħal trasformazzjoni u opaċità - joħolqu kuntesti ta 'stacking ġodda? Hawn il-ħaġa: dawn il-proprjetajiet ma joħolqux kuntesti ta 'stacking minħabba kif jidhru; jagħmlu dan minħabba kif jaħdem il-browser taħt il-barnuża. Meta tapplika t-trasformazzjoni, l-opaċità, il-filtru, jew il-perspettiva, tkun qed tgħid lill-browser, "Ħej, dan l-element jista' jiċċaqlaq, idur jew jisparixxi, għalhekk kun lest!"
Meta tuża dawn il-proprjetajiet, il-browser joħloq kuntest ġdid ta 'stacking biex jimmaniġġja l- rendering b'mod aktar effiċjenti. Dan jippermetti lill-browser jimmaniġġa animazzjonijiet, trasformazzjonijiet u effetti viżwali b'mod indipendenti, u jnaqqas il-ħtieġa li jerġa 'jikkalkula kif dawn l-elementi jinteraġixxu mal-bqija tal-paġna. Aħseb fiha bħala l-browser jgħid, "Jien se nittratta dan il-folder separatament sabiex ma jkollix għalfejn nibdel mill-ġdid l-iskrivanija kollha kull darba li xi ħaġa ġewwa tinbidel." Imma hemmeffett sekondarju. Ladarba l-browser jgħolli element fis-saff tiegħu stess, irid "iċċattja" kollox fi ħdanu, u joħloq kuntest ġdid ta 'stacking. Huwa bħal li tieħu folder minn fuq l-iskrivanija biex timmaniġġaha separatament; kollox ġewwa dak il-folder jiġi raggruppat, u l-browser issa jittrattah bħala unità waħda meta jiddeċiedi dak li jpoġġi fuq xiex. Allura minkejja li l-proprjetajiet tat-trasformazzjoni u l-opaċità jistgħu ma jidhrux li jaffettwaw il-mod li bih l-elementi jinstammu viżwalment, jagħmlu, u huwa għall-ottimizzazzjoni tal-prestazzjoni. Diversi proprjetajiet CSS oħra jistgħu wkoll joħolqu kuntesti ta 'stacking għal raġunijiet simili. MDN jipprovdi lista kompleta jekk trid tħaffer aktar fil-fond. Hemm pjuttost ftit, li juri biss kemm huwa faċli li involontarjament toħloq kuntest ta 'stivar mingħajr ma tkun taf. Il-Problema tal-"Unstacking". Kwistjonijiet ta 'stivar jistgħu jinqalgħu għal ħafna raġunijiet, iżda xi wħud huma aktar komuni minn oħrajn. Il-komponenti modali huma mudell klassiku minħabba li jeħtieġu li l-komponent jitbiddel biex "jinfetaħ" fuq saff ta 'fuq fuq l-elementi l-oħra kollha, imbagħad jitneħħa mis-saff ta' fuq meta jkun "magħluq". Jiena pjuttost kunfidenti li lkoll ltqajna f'sitwazzjoni fejn niftħu modal u, għal kwalunkwe raġuni, ma tidhirx. Mhuwiex li ma fetaħx sew, iżda li huwa barra mill-vista f'saff aktar baxx tal-kuntest tal-istivar. Dan iħallik tistaqsi "kif ġejja?" peress li ssettja:
.overlay { pożizzjoni: fissa; /* joħloq il-kuntest tal-istivar */ z-indiċi: 1; /* ipoġġi l-element fuq saff fuq kull ħaġa oħra */ daħla: 0; wisa ': 100%; għoli: 100vh; overflow: moħbi; kulur tal-isfond: #00000080; }
Dan jidher korrett, imma jekk l-element ġenitur li fih il-grillu modali huwa element tifel fi ħdan element ġenitur ieħor li huwa wkoll issettjat għal z-index: 1, li teknikament ipoġġi l-modal f'sottosaff mgħotti mill-folder prinċipali. Ejja nħarsu lejn dak ix-xenarju speċifiku u koppja ta 'żvantaġġi komuni oħra ta' stivar-kuntest. Naħseb li tara mhux biss kemm huwa faċli li toħloq kuntesti ta 'stacking involontarjament, iżda wkoll kif timmaniġġjahom ħażin. Ukoll, kif tirritorna għal stat ġestit jiddependi mis-sitwazzjoni. Xenarju 1: Il-Modal Maqbud
Tista' immedjatament tara l-modal tiegħek maqbuda f'saff ta' livell baxx u tidentifika l-ġenitur. Estensjonijiet tal-browser Iżviluppaturi intelliġenti bnew estensjonijiet biex jgħinu. Għodod bħal din l-estensjoni tal-"CSS Stacking Context Inspector" tal-Chrome żid tab z-index addizzjonali mad-DevTools tiegħek biex turik informazzjoni dwar elementi li joħolqu kuntest ta 'stacking.
Estensjonijiet IDE Tista 'anki ssib kwistjonijiet waqt l-iżvilupp b'estensjoni bħal din għal VS Code, li tenfasizza kwistjonijiet potenzjali ta' kuntest ta 'stacking direttament fl-editur tiegħek.
Tneħħija U Erġa' Takkwista Kontroll Wara li identifikajna l-kawża ewlenija, il-pass li jmiss huwa li nittrattawha. Hemm diversi approċċi li tista 'tieħu biex tindirizza din il-problema, u jien ser telenkahom fl-ordni. Tista' tagħżel xi ħadd fi kwalunkwe livell, għalkemm; ħadd ma jista’ jilmenta jew ifixkel lil ħaddieħor. Ibdel L-Istruttura HTML Dan huwa meqjus bħala l-aħjar soluzzjoni. Biex inti tidħol fi kwistjoni ta 'kuntest ta' stivar, trid tkun poġġiet xi elementi f'pożizzjonijiet umoristiċi fi ħdan l-HTML tiegħek. Ir-ristrutturar tal-paġna jgħinek tifforma mill-ġdid id-DOM u telimina l-problema tal-kuntest tal-istivar. Sib l-element problematiku u neħħih mill-element tal-insib fil-markup HTML. Pereżempju, nistgħu nsolvu l-ewwel xenarju, "Il-Modal Maqbud", billi nċaqalqu l-.modal-container barra mill-header u npoġġuh fl-element
waħdu.Dan il-kontenut għandu indiċi z ta' 2 u xorta mhux se jkopri l-modal.Header
Kontenut Prinċipali
Meta tikklikkja l-buttuna "Open Modal", il-modal jitqiegħed quddiem kull ħaġa oħra kif suppost. Ara x-Xenarju tal-Pinna 1: Il-Modal Maqbud (Soluzzjoni) [forked] minn Shoyombo Gabriel Ayomide. Aġġusta IlKuntest ta' Stacking tal-Ġenituri F'CSS X'jiġri jekk l-element huwa wieħed li ma tistax tiċċaqlaq mingħajr ma tkisser it-tqassim? Huwa aħjar li tindirizza l-kwistjoni: il-ġenitur jistabbilixxi l-kuntest. Sib il-proprjetà (jew proprjetajiet) tas-CSS responsabbli biex tiskatta l-kuntest u neħħiha. Jekk ikollu skop u ma jistax jitneħħa, agħti lill-ġenitur valur z-index ogħla mill-elementi aħwa tiegħu biex jerfa 'l-kontenitur kollu. B'valur ta 'l-indiċi z ogħla, il-kontenitur ġenitur jimxi lejn il-quċċata, u t-tfal tiegħu jidhru eqreb lejn l-utent. Ibbażat fuq dak li tgħallimna fix-xenarju "The Submerged Dropdown", ma nistgħux nimxu l-dropdown 'il barra min-navbar; ma jagħmilx sens. Madankollu, nistgħu nżidu l-valur z-index tal-kontenitur .navbar biex ikun akbar mill-valur z-index tal-element .content. .navbar { sfond: #333; /* indiċi z: 1; */ indiċi z: 3; pożizzjoni: relattiva; }
B'din il-bidla, il-menu .dropdown issa jidher quddiem il-kontenut mingħajr ebda ħruġ.
Ara x-Xenarju tal-Pinna 2: The Submerged Dropdown (Soluzzjoni) [forked] minn Shoyombo Gabriel Ayomide.
Ipprova Portali, Jekk Uża Qafas
F'oqfsa bħal React jew Vue, Portal huwa karatteristika li tħallik tirrendi komponent barra l-ġerarkija ġenitur normali tiegħu fid-DOM. Il-portali huma bħal apparat ta' teleportazzjoni għall-komponenti tiegħek. Huma jħalluk tirrendi l-HTML ta 'komponent kullimkien fid-dokument (tipikament dritt f'document.body) filwaqt li jżommu loġikament konness mal-ġenitur oriġinali tiegħu għal props, stat, u avvenimenti. Dan huwa perfett biex jaħarbu n-nases tal-kuntest tal-istivar peress li l-output mogħti litteralment jidher barra l-kontenitur ġenitur problematiku.
ReactDOM.createPortal(
Dan jiżgura li l-kontenut dropdown tiegħek ma jkunx moħbi wara l-ġenitur tiegħu, anki jekk il-ġenitur ikollu overflow: moħbi jew indiċi z aktar baxx. Fix-xenarju "The Clipped Tooltip" li ħares lejn aktar kmieni, użajt Portal biex insalva l-tooltip mill-overflow: clip moħbi billi poġġih fil-korp tad-dokument u poġġih fuq il-grillu fil-kontenitur. Ara x-Xenarju tal-Pinna 3: The Clipped Tooltip (Soluzzjoni) [forked] minn Shoyombo Gabriel Ayomide. L-introduzzjoni ta' Kuntest ta' Stacking Mingħajr Effetti sekondarji L-approċċi kollha spjegati fit-taqsima preċedenti huma mmirati lejn "unstacking" ta 'elementi minn kuntesti ta' stacking problematiċi, iżda hemm xi sitwazzjonijiet fejn fil-fatt ikollok bżonn jew trid toħloq kuntest ta 'stacking. Il-ħolqien ta 'kuntest ġdid ta' stivar huwa faċli, iżda l-approċċi kollha jiġu b'effett sekondarju. Jiġifieri, ħlief għall-użu ta 'iżolament: iżolat. Meta applikat għal element, il-kuntest tal-istivar tat-tfal ta 'dak l-element huwa determinat relattiv għal kull tifel u f'dak il-kuntest, aktar milli jiġi influwenzat minn elementi barra minnu. Eżempju klassiku huwa li jassenja dak l-element valur negattiv, bħal indiċi z: -1. Immaġina li għandek komponent .card. Trid iżżid forma dekorattiva li tpoġġi wara t-test tal-karta, iżda fuq l-isfond tal-karta. Mingħajr kuntest ta 'stivar fuq il-karta, z-index: -1 jibgħat il-forma fil-qiegħ tal-kuntest ta' stivar ta 'l-għeruq (il-paġna kollha). Dan jagħmilha tisparixxi wara l-isfond abjad tal-.card: Ara l-Pinna Negative z-index (problema) [forked] minn Shoyombo Gabriel Ayomide. Biex issolvi dan, aħna niddikjaraw iżolament: iżolat fuq il-ġenitur .card: Ara l-Pinna Negative z-index (soluzzjoni) [furketta] minn Shoyombo Gabriel Ayomide. Issa, l-element .card innifsu jsir kuntest ta 'stivar. Meta l-element tifel tiegħu — il-forma dekorattiva maħluqa fuq il-:before pseudo-element — ikollu z-index: -1, imur fil-qiegħ nett tal-kuntest tal-istivar tal-ġenitur. Tpoġġi perfettament wara t-test u fuq l-isfond tal-karta, kif maħsub. Konklużjoni Ftakar: il-ħin li jmiss li l-indiċi z tiegħek jidher barra mill-kontroll, huwa kuntest ta 'stacking maqbud. Referenzi
Kuntest tal-istivar (MDN) Z-index u kuntesti ta' stacking (web.dev) "Kif Toħloq Kuntest Ġdid ta 'Stivar bil-Proprjetà ta' Iżolament f'CSS", Natalie Pina "X'inhu l-Heck, z-index?", Josh Comeau
Aktar Qari Fuq SmashingMag
“Ġestjoni CSS Z-Index Fi Proġetti Kbar”, Steven Frieson "Headers li Jwaħħlu U Elementi ta' Għoli Sħiħ: Kombinazzjoni Delikata", Philip Braunen "Ġestjoni ta 'Z-Index F'Applikazzjoni Web Ibbażata fuq Komponenti", Pavel Pomerantsev "Il-Proprjetà CSS Z-Index: Ħarsa Komprensiva", Louis Lazaris
