Kua tautuhia e koe te tohu-z: 99999 i runga i tetahi huānga i roto i to CSS, a kaore e puta ki runga ake i etahi atu waahanga? Ko te uara nui me ngawari te whakanoho i taua huānga ki runga ake i tetahi atu mea, ki te whakaaro kua whakatauhia nga huānga rereke katoa ki te uara iti ake, kaore ranei i whakaritea. Ko te nuinga o nga wa ka whakaatuhia he wharangi paetukutuku ki te mokowā ahu-rua; heoi, ma te whakamahi i nga ahuatanga CSS motuhake, ka whakauruhia he rererangi tuaka-z pohewa hei kawe i te hohonu. Ko tenei rererangi e tika ana ki te mata, a, mai i tera, ka kite te kaiwhakamahi i te raupapa o nga huānga, tetahi ki runga ake o tetahi. Ko te whakaaro kei muri i te tuaka-z pohewa, ko te tirohanga a te kaiwhakamahi mo nga huānga kua tapae, ko nga taonga CSS e hanga ana ka whakakotahi ki te hanga i te mea e kiia nei he horopaki taapu. Ka korero tatou mo te "whakapae" o nga huānga ki runga i te wharangi paetukutuku, he aha te whakahaere i te raupapa whakaputu, me nga huarahi whaihua ki te "tango" huānga ina hiahiatia. Mo te Whakapapa Horopaki Whakaarohia to wharangi paetukutuku hei tepu. I a koe e taapiri ana i nga huānga HTML, kei te whakatakoto koe i nga pepa, tetahi i muri i tetahi, ki runga i te teepu. Ko te pepa whakamutunga i whakatakotoria he rite ki te huānga HTML hou kua tapirihia, ka noho ki runga ake o era atu pepa katoa kua tuu ki mua. Ko te rerenga tuhinga noa tenei, ahakoa mo nga huānga kohanga. Ko te teepu ake e tohu ana i te horopaki taapu pakiaka, i hangaia e te huānga , kei roto katoa nga kōpaki. Inaianei, ka uru mai nga taonga CSS motuhake. Ko nga ahuatanga penei i te tuunga (me te tohu-z), te opacity, te huri, me te whakauru) ka rite ki te kōpaki. Ka mauhia e tenei kōpaki tetahi huānga me ana tamariki katoa, ka tangohia mai i te puranga matua, ka whakarōpūhia ki roto i tetahi putunga-iti motuhake, ka hanga i te mea e kiia nei he horopaki taapu. Mo nga huānga kua whakaritea, ka puta tenei ina whakaatu ana tatou i te uara-taupū-z i tua atu i te aunoa. Mo nga ahuatanga penei i te opacity, te huri, me te tātari, ka waihanga aunoatia te horopaki tapae ina hoatu nga uara motuhake.
Me ngana ki te mohio ki tenei: I te wa e uru ana tetahi pepa (ara, he huānga tamaiti) ki roto i tetahi kōpaki (arā, ko te horopaki o te papa o te matua), e kore rawa e taea te puta atu i taua kōpaki, ka waiho ranei i waenganui i nga pepa ki tetahi kōpaki rereke. Ko tana tohu-z kei roto noa i tana ake kōpaki.
I roto i te whakaahua i raro nei, ko te Pepa B kei roto i te horopaki taapu o te Kōpaki B, ka taea anake te tono me etahi atu pepa kei roto i te kōpaki.
Whakaarohia, ki te pai koe, e rua nga kōpaki kei runga i to papapu:
.kōpaki-a { z-index: 1; } .kōpaki-b { z-index: 2; }
Me whakahou ake te tohu tohu. Ko roto i te Kōpaki A he whārangi motuhake, z-taupū: 9999. I roto i te Kōpaki B he wharangi noa, z-taupū: 5.
.wharangi-motuhake { z-index: 9999; } .wharangi-maama { z-index: 5; }
Ko tehea wharangi kei runga? Ko te wharangi-maamaa kei te Kōpaki B. Ka warewarehia e te kaitirotiro nga pepa a nga tamariki, ka tapaetia nga kōpaki e rua i te tuatahi. Ka kite i te Kōpaki B (taupū-z: 2) ka waiho ki runga o te Kōpaki A (taupū-z: 1) nā te mea e mōhio ana mātou he nui ake te rua i te kotahi. I tenei wa, ko te wharangi-motuhake kua tautuhia ki te tohu-z: 9999 wharangi kei raro o te puranga ahakoa kua whakaritea tana tohu-z ki te uara teitei rawa atu. Ka taea hoki te kohanga i nga horopaki puranga (kopaki kei roto i nga kōpaki), ka hanga he "rakau whanau." He rite ano te kaupapa: e kore e taea e te tamaiti te mawhiti i te kōpaki a ona matua. Inaianei kua mohio koe he pehea te ahua o te whakatakotoranga o nga horopaki rite ki nga kōpaki e whakarōpū ana me te whakariterite ano i nga paparanga, he pai te patai: he aha etahi o nga taonga - penei i te huri me te opacity - ka waihanga i nga horopaki taapu hou? Anei te mea: karekau enei taonga e hanga i nga horopaki tapapa na te ahua o te ahua; ka mahia e ratou na te ahua o te mahi a te kaitirotiro i raro i te hood. Ina tono koe i te huringa, te opacity, te tātari, te tirohanga ranei, kei te kii koe ki te kaitirotiro, "Kia, ka neke, ka huri, ka memenge ranei tenei huānga, no reira kia rite!"
Ina whakamahi koe i enei taonga, ka waihangahia e te kaitirotiro he horopaki tapae hou kia pai ake ai te whakahaeretanga. Ma tenei ka taea e te kaitirotiro te whakahaere i nga pakiwaituhi, nga huringa, me nga paanga ataata takitahi, me te whakaiti i te hiahia ki te tatau ano me pehea te taunekeneke o enei huānga ki te toenga o te whaarangi. Whakaarohia ko te korero a te kaitirotiro, "Ka wehea e au tenei kōpaki kia kore ahau e huri i te katoa o te teepu i nga wa katoa ka huri tetahi mea o roto." Engari kei reirahe pānga taha. Kia hikitia e te kaitirotiro tetahi huānga ki roto i tana ake paparanga, me "whakapapa" nga mea katoa o roto, me te hanga i tetahi horopaki taapiri hou. He rite ki te tango i tetahi kōpaki mai i te teepu ki te hapai wehe; Ko nga mea katoa kei roto i taua kōpaki ka whakarōpūhia, ka noho te kaitirotiro hei waeine kotahi ina whakatau he aha kei runga ake i te aha. Na, ahakoa te ahua o te huringa me te opacity kare pea e pa ki te ahua o nga huānga e whakahiato ana i te tirohanga, ka mahia e ratou, a ma te arotau mahi. Ka taea hoki e etahi atu taonga CSS te hanga horopaki taapu mo nga take rite. Ka whakaratohia e MDN he rarangi katoa ki te hiahia koe ki te keri hohonu. He ruarua noa nei, e whakaatu ana i te ngawari o te hanga pohehe i te horopaki taapu me te kore e mohio. Ko te Raruraru "Te Wetewete". He maha nga take ka ara ake, engari ko etahi he mea noa ake i era atu. He tauira matarohia nga waahanga tauira na te mea me huri te waahanga ki te "tuwhera" i runga i te paparanga o runga ake i era atu huānga katoa, katahi ka tangohia mai i te paparanga o runga ina "kati." Kei te tino maia ahau kua pa katoa tatou ki tetahi ahuatanga ka whakatuwherahia e tatou he tikanga, ahakoa he aha te take, kaore e puta. Ehara i te mea kaore i tuwhera tika, engari kaore e kitea i roto i te paparanga o raro o te horopaki puranga. Ma tenei ka miharo koe "me pehea?" mai i to tautuhi:
.whakakikorua { tūnga: fixed; /* ka waihanga i te horopaki tāpae */ z-taupū: 1; /* ka waiho te huānga ki runga i te paparanga ki runga ake i era atu mea katoa */ whakauru: 0; whanui: 100%; teitei: 100vh; overflow: huna; tae papamuri: #00000080; }
He tika te ahua, engari mena ko te huānga matua kei roto i te keu aratau he huānga tamaiti kei roto i tetahi atu huānga matua kua tautuhia hoki ki te tohu-z: 1, ka tuu te aratau ki roto i te paparanga-roto kua hunahia e te kōpaki matua. Kia titiro tatou ki tera ahuatanga motuhake me etahi atu mahanga taapiri-horopaki noa e rua. Ki taku whakaaro ka kite koe ehara i te mea ngawari noa ki te hanga pohehe i nga horopaki taapiri, engari me pehea hoki te whakahaere pohehe. Ano hoki, me pehea koe e hoki mai ai ki te whenua whakahaere ka whakawhirinaki ki te ahuatanga. Scenario 1: Te Modal kua mau
Ka kite tonu koe i to aratau kua mau ki roto i te paparanga taumata-iti me te tautuhi i te matua. Toronga Pūtirotiro Kua hangaia e nga kaiwhakawhanake atamai he taapiri hei awhina. Ko nga taputapu penei i tenei "Kaitirotiro Horopaki CSS Stacking" Ko te toronga Chrome ka taapirihia he ripa tohu-z ki o DevTools hei whakaatu ki a koe nga korero mo nga huānga e hanga ana i te horopaki puranga.
Toronga IDE Ka taea e koe te kite i nga take i te wa o te whakawhanaketanga me te taapiri penei mo tenei mo te Waehere VS, e whakaatu ana i nga take o te whakatakotoranga i roto i to kaiwhakatikatika.
Te Wetewete Me te Whakahou Mana I muri i te tautuhi i te take pakiaka, ko te mahi e whai ake nei ko te mahi ki a ia. He maha nga huarahi ka taea e koe ki te whakatika i tenei raru, a ka whakarārangihia e au. Ka taea e koe te whiriwhiri i tetahi i tetahi taumata, ahakoa; e kore e taea e tetahi te amuamu, te aukati ranei i tetahi atu. Hurihia te Hanganga HTML Ka whakaarohia tenei ko te whakatika tino pai. Kia uru koe ki roto i tetahi take horopaki taapu, me waiho e koe etahi huānga ki nga waahi rorirori i roto i to HTML. Ma te whakatikatika i te wharangi ka awhina koe ki te hanga ano i te DOM me te whakakore i te raru o te horopaki taapu. Kimihia te huānga raruraru ka tango mai i te huānga mahanga i te tohu HTML. Hei tauira, ka taea e tatou te whakaoti i te ahuatanga tuatahi, "The Trapped Modal," ma te neke i te .modal-container mai i te pane me te whakanoho ki roto i te huānga
.E 2 te taupū-z o tenei ihirangi, kare ano e kapi te tikanga.Pūpoko
Ihirangi Matua
Ka paatohia e koe te paatene "Whakatuwhera Modal", ka tuuhia te ahua ki mua o nga mea katoa e kiia ana. Tirohia te Pene Scenario 1: The Trapped Modal (Solution) [forked] by Shoyombo Gabriel Ayomide. Whakaritea TeHoropaki Taapiri Maatua I CSS He aha mena ko te huānga kaore e taea e koe te neke me te kore e pakaru te tahora? He pai ake te whakatika i te take: ka whakatauhia e te matua te horopaki. Kimihia te taonga CSS (he taonga ranei) te kawenga mo te whakaoho i te horopaki me te tango. Mēnā he kaupapa tōna, ā, kāore e taea te tango, hoatu he uara taupū-z teitei ake ki te matua i ona huānga teina hei hiki i te ipu katoa. Ma te uara taupū-z teitei ake, ka neke te ipu matua ki runga, ka tata atu ana tamariki ki te kaiwhakamahi. I runga i nga mea i akohia e matou i roto i te ahuatanga "The Submerged Dropdown", e kore e taea e matou te neke i te takaiho i waho o te navbar; e kore e whai tikanga. Heoi, ka taea e tatou te whakanui ake i te uara tohu-z o te ipu .navbar kia nui ake i te uara-z-taupū o te huānga ihirangi. .navbar { papamuri: #333; /* tohu-z: 1; */ z-taupū: 3; tūranga: whanaunga; }
Na tenei huringa, ka puta te .dropdown-menu i mua o te ihirangi kaore he take.
Tirohia te Turanga Pene 2: Ko te Whakataka I raro i te Ruku (Rauinga) [kua marau] na Shoyombo Gabriel Ayomide.
Whakamātauria te Paerewa, Mena kei te whakamahi i te anga
I roto i nga anga penei i te React, i te Vue ranei, ko te Portal tetahi waahanga e taea ai e koe te whakaputa i tetahi waahanga ki waho atu o tana arowhai matua i roto i te DOM. He rite nga paanui ki te taputapu waea waea mo o waahanga. Ka tuku koe ki te tuku HTML o tetahi waahanga ki nga waahi katoa o te tuhinga (te nuinga tika ki te document.body) me te hono tonu ki tona matua taketake mo nga taonga, te kawanatanga, me nga huihuinga. He tino pai tenei mo te mawhiti i nga mahanga o te horopaki mai i te mea ka puta te putanga i waho o te ipu matua raruraru.
ReactDOM.createPortal(
Ma tenei ka whakarite kia kore e hunahia to ihirangi takaiho ki muri i tona matua, ahakoa kua puhake te matua: kua huna, he tohu-z iti ranei. I roto i te ahuatanga "Te Aki Utauta Tapahia" i tirohia e matou i mua, i whakamahia e ahau he Pouaka hei whakaora i te aki taputapu mai i te waipuke: he topenga huna ma te tuu ki roto i te tinana tuhinga me te whakanoho ki runga ake o te keu i roto i te ipu. Tirohia te Turanga Pene 3: Ko te Aki Utauta Tapahia (Rauinga) [kua marau] na Shoyombo Gabriel Ayomide. Te Whakataki i te Horopaki Tapapa Kore Nga Paanga Taha Ko nga huarahi katoa e whakamaramatia ana i te waahanga o mua e whai ana ki te "tango" i nga huānga mai i nga horopaki whakaraerae whakaraerae, engari tera ano etahi ahuatanga ka tino hiahia koe, ka hiahia ranei koe ki te hanga i tetahi horopaki puranga. He ngawari te hanga i tetahi horopaki taapu hou, engari ka tae mai nga huarahi katoa me te paanga taha. Arā, hāunga te whakamahi wehe: wehe. Ina pa ana ki tetahi huānga, ka whakatauhia te horopaki taapu o nga tamariki o taua huānga ki ia tamaiti me roto i taua horopaki, kaua ki te awe i nga huānga o waho. Ko tetahi tauira matarohia e tautapa ana ki taua huānga he uara toraro, penei i te taurangi-z: -1. Whakaarohia he waahanga .card koe. Kei te hiahia koe ki te taapiri i tetahi ahua whakapaipai e noho ana i muri i te tuhinga o te .card, engari ki runga ake o te papamuri o te kaari. Karekau he horopaki tapae i runga i te kaari, ka tukuna e te taupū-z: -1 te ahua ki raro o te horopaki taapu pakiaka (te wharangi katoa). Ka ngaro i muri i te papamuri ma o te kaari: Tirohia te Pen Negative z-index (raruraru) [marau] na Shoyombo Gabriel Ayomide. Hei whakaoti i tenei, ka kii matou he wehe: wehea ki te kaari .matua: Tirohia te Pen Negative z-index (tohanga) [marau] na Shoyombo Gabriel Ayomide. Inaianei, ko te huānga .card ake ka noho hei horopaki tapae. Ina ko tana huānga tamaiti — te ahua whakapaipai i hangaia i runga i te :before pseudo-huānga — he z-taupū: -1, ka haere ki raro rawa o te horopaki taapu o te matua. Ka noho pai ki muri o te tuhinga me runga ake o te papamuri o te kaari, i runga i te whakaaro. Whakamutunga Kia maumahara: i te wa i muri mai ka ahua kore te mana o to tohu-z, he horopaki taapu kua mau. Tohutoro
Horopaki tāpae (MDN) Taupū-Z me ngā horopaki tāpae (web.dev) "Me pehea te Waihanga i tetahi Horopaki Taapiri Hou me te Taonga Motuhake i roto i te CSS", Natalie Pina "He aha te Heck, z-index??", Josh Comeau
He Panui Ake Mo SmashingMag
"Te whakahaere i te CSS Z-Index I roto i nga Kaupapa Nui", Steven Frieson "Nga Pane Whakapiri me nga Huanga Teitei-Katoa: He Whakakotahitanga Hikaka", Philip Braunen "Whakahaere Z-Index I roto i te Taupānga Tukutuku-Waihanga", Pavel Pomerantsev "Te Taonga Z-Index CSS: He Tirohanga Matawhānui", Louis Lazaris
