Na o kile oa beha z-index: 99999 ho element ho CSS ea hau, 'me ha e tsoe ka holim'a likarolo tse ling? Boleng bo boholo bo lokela ho beha element eo habonolo ka holimo ho eng kapa eng, ho nka hore likarolo tsohle tse fapaneng li behiloe ka boleng bo tlase kapa ha lia behoa ho hang. Hangata leqephe la tepo le emeloa sebakeng sa mahlakore a mabeli; leha ho le joalo, ka ho sebelisa thepa e khethehileng ea CSS, sefofane se inahaneloang sa z-axis se hlahisoa ho fetisa botebo. Sefofane sena se shebane le skrine, 'me ho tloha ho sona, mosebelisi o bona tatellano ea likarolo, e' ngoe ka holim'a e 'ngoe. Mohopolo o ka morao ho z-axis e inahaneloang, pono ea mosebelisi ea likarolo tse phuthetsoeng, ke hore thepa ea CSS e e bopang e kopana ho theha seo re se bitsang moelelo oa stacking. Re tla bua ka hore na likarolo li "pakiloe" joang leqepheng la sebaka sa marang-rang, ke eng e laolang tatellano ea ho bokella, le mekhoa e sebetsang ea ho "tlolla" ha ho hlokahala. Mabapi le Stacking Contexts Nahana ka leqephe la hau la marang-rang e le deske. Ha u ntse u eketsa likarolo tsa HTML, u ntse u beha likotoana tsa pampiri, ka mor'a e 'ngoe, holim'a deske. Pampiri ea ho qetela e behiloeng e lekana le karolo ea HTML e sa tsoa eketsoa, 'me e lutse holim'a lipampiri tse ling tse behiloeng ka pel'a eona. Ena ke mokhoa o tloaelehileng oa ho phalla ha litokomane, esita le bakeng sa likarolo tsa sehlaha. Tafole ka boeona e emela moelelo oa motso oa stacking, o entsoeng ke karolo ea , e nang le li-folders tse ling kaofela. Hona joale, lisebelisoa tse khethehileng tsa CSS lia sebetsa. Thepa e kang boemo (ka z-index), opacity, transform, and contain) e sebetsa joalo ka foldara. Foldara ena e nka ntho e itseng le bana bohle ba eona, e li ntša mokotleng o moholo, ebe e li arola ka har'a sub-stack e arohaneng, e theha seo re se bitsang moelelo oa stacking. Bakeng sa likarolo tse behiloeng, sena se etsahala ha re phatlalatsa boleng ba z-index ntle le auto. Bakeng sa thepa e kang opacity, transform, le filter, moelelo oa stacking o iketsetsa ha ho sebelisoa litekanyetso tse khethehileng.
Leka ho utloisisa sena: Hang ha sekhechana sa pampiri (ke hore, ntho ea ngoana) se le ka har’a foldara (ke hore, moelelo oa taba ea motsoali), le ka mohla e ke ke ea tsoa foldareng eo kapa ea behoa pakeng tsa lipampiri foldareng e fapaneng. z-index ea eona e se e sebetsa feela ka har'a foldara ea eona.
Setšoantšong se ka tlase, Pampiri ea B e se e le ka har'a foldara ea B, 'me e ka laeloa feela ka lipampiri tse ling foldareng.
Ak'u nahane, haeba u rata, u na le lifoldara tse peli tafoleng ea hau:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Ha re ntlafatseng markup hanyane. Ka hare ho Folder A ke leqephe le khethehileng, z-index: 9999. Ka hare ho Folder B ho na le leqephe le hlakileng, z-index: 5.
.leqephe le khethehileng { z-index: 9999; } .leqephe le hlakileng { z-index: 5; }
Ke leqephe lefe ka holimo? Ke leqephe la .plain ho Folder B. Sebatli se hlokomoloha lipampiri tsa bana ebe se bokella lifoldara tse peli pele. E bona Folder B (z-index: 2) mme e e beha ka holim'a Folder A (z-index: 1) hobane rea tseba hore tse peli li kholo ho feta a le mong. Ho sa le joalo, .special-page set to z-index: 9999 page is at the bottom of the stack le hoja z-index ea eona e behiloe ho boleng bo phahameng ka ho fetisisa bo ka khonehang. Maemo a stacking a ka boela a behoa (liphutheloana ka hare ho lifoldara), ho theha "sefate sa lelapa." Ho sebetsa molao-motheo o tšoanang: le ka mohla ngoana a ke ke a phonyoha foldareng ea batsoali ba hae. Kaha joale o fumana hore na maemo a stacking a sebetsa joang joalo ka lifoldara tse hlophang le ho hlophisa mekhahlelo hape, ho bohlokoa ho botsa: hobaneng ha thepa e itseng - joalo ka phetoho le opacity - e theha maemo a macha a stacking? Taba ke ena: thepa ena ha e thehe maemo a stacking ka lebaka la hore na e shebahala joang; ba e etsa ka lebaka la hore na sebatli se sebetsa joang tlas'a hood. Ha o sebelisa phetoho, opacity, filthara, kapa pono, o re ho sebatli, "Hei, ntho ena e kanna ea sisinyeha, ea potoloha, kapa ea fifala, ka hona, itokise!"
Ha o sebelisa lisebelisoa tsena, sebatli se theha maemo a macha a stacking ho laola ho fana ka mokhoa o atlehileng haholoanyane. Sena se lumella sebatli ho sebetsana le lipopae, ho fetola, le litlamorao tsa pono ka boits'oaro, ho fokotsa tlhoko ea ho bala bocha hore na likarolo tsena li sebelisana joang le leqephe lohle. E nahane joalo ka sebatli se reng, "Ke tla sebetsana le foldara ena ka thoko hore ke se ke ka fetola deske eohle nako le nako ha ntho e ka hare ho eona e fetoha." Empa ho na lephello e lehlakoreng. Hang ha sebatli se phahamiselitse ntho ka har'a eona, e tlameha ho "batalatsa" ntho e 'ngoe le e' ngoe e ka hare ho eona, ho theha moelelo o mocha oa stacking. Ho tšoana le ho tlosa foldara tafoleng ho e sebetsana ka thoko; ntho e 'ngoe le e' ngoe e ka har'a foldara eo e hlophisoa, 'me sebatli joale se se nka e le yuniti e le' ngoe ha se etsa qeto ea hore na ho lutse holim'a eng. Leha ho le joalo, leha thepa ea phetoho le opacity e kanna ea bonahala e sa ame tsela eo likarolo li emang ka eona ka pono, li etsa joalo, 'me ke bakeng sa ntlafatso ea ts'ebetso. Mehaho e meng e mengata ea CSS le eona e ka theha maemo a stacking ka mabaka a tšoanang. MDN e fana ka lethathamo le felletseng haeba u batla ho cheka ho teba. Ho na le tse 'maloa, tse bonts'ang feela hore na ho bonolo hakae ho theha maemo a stacking ntle le ho tseba. Bothata ba "Unstacking". Litaba tsa stacking li ka hlaha ka mabaka a mangata, empa tse ling li atile ho feta tse ling. Likarolo tsa modal ke paterone ea khale hobane li hloka ho fetola karolo hore e "bule" holim'a lera e kaholimo ho likarolo tse ling kaofela, ebe e e tlosa mokatong o kaholimo ha "e koetsoe." Ke na le ts'epo e ntle ea hore kaofela ha rona re kene boemong boo re bulang modal mme, ka lebaka leha e le lefe, ha le hlahe. Ha se hore e ne e sa buleha hantle, empa hore ha e bonahale sebakeng se ka tlase sa maemo a stacking. Sena se etsa hore u ipotse "ho tla joang?" esale u beha:
.kakaretso { boemo: e tsitsitseng; /* e theha maemo a stacking */ z-index: 1; /* e beha ntlha holim'a lera ka holim'a ntho e 'ngoe le e' ngoe */ setšoantšo: 0; bophara: 100%; bophahamo: 100vh; khaphatseha: e patehileng; mebala-bala: #00000080; }
Sena se shebahala se nepahetse, empa haeba karolo ea motsoali e nang le modal trigger e le ntho ea ngoana ka har'a karolo e 'ngoe ea motsoali eo le eona e behiloeng ho z-index: 1, eo ka botekgeniki e behang modal ka har'a sethala se patiloeng ke foldara e kholo. Ha re shebeng boemo boo bo ikhethileng le litšitiso tse ling tse 'maloa tse tloaelehileng tsa maemo a holimo. Ke nahana hore u tla bona eseng feela hore na ho bonolo hakae ho theha maemo a stacking, empa hape le mokhoa oa ho a laola hampe. Hape, hore na u khutlela joang sebakeng se laoloang ho itšetlehile ka boemo. Boemo ba 1: Mokhoa oa ho Trapped
Hang-hang u ka bona modal ea hau e qabeletsoe boemong bo tlaase 'me u khetholle motsoali. Browser Extensions Basebelisi ba bohlale ba hahile likeketso ho thusa. Lisebelisoa tse joalo ka "CSS Stacking Context Inspector" katoloso ea Chrome e kenyelletsa tabo e eketsehileng ea z-index ho li-DevTools tsa hau ho u bontša leseli mabapi le likarolo tse etsang hore ho be le maemo a stacking.
Keketso ea IDE U ka bona le mathata nakong ea nts'etsopele ka katoloso e kang ena ea VS Code, e totobatsang litaba tse ka bang teng ka har'a mohlophisi oa hau.
Unstacking Le ho Fumana Taolo Ka mor'a hore re fumane sesosa sa sesosa, mohato o latelang ke ho sebetsana le sona. Ho na le mekhoa e 'maloa eo u ka e nkang ho sebetsana le bothata bona,' me ke tla e thathamisa ka tatellano. U ka khetha mang kapa mang boemong bofe kapa bofe, leha ho le joalo; ha ho motho ea ka belaelang kapa a sitisa e mong. Fetola Sebopeho sa HTML Sena se nkuoa e le tokiso e nepahetseng. E le hore u kenelle tabeng ea taba ea stacking, e tlameha ebe u behile likarolo tse ling maemong a qabolang ka har'a HTML ea hau. Ho hlophisa leqephe bocha ho tla u thusa ho fetola DOM le ho felisa bothata ba litaba tsa stacking. Fumana ntho e nang le bothata 'me u e tlose ho tsoa karolong e ts'oarang ho HTML markup. Ka mohlala, re ka rarolla boemo ba pele, "The Trapped Modal," ka ho tlosa .modal-container ho tsoa hloohong le ho e beha karolong ea
ka boeona.Likahare tsena li na le z-index ea 2 'me li ntse li ke ke tsa akaretsa modal.Sehlooho
Litaba tsa mantlha
Enjoyed This Article?
Get weekly tips on growing your audience and monetizing your content — straight to your inbox.
No spam. Join 138,000+ creators. Unsubscribe anytime.