z-index: 99999 elementii CSS kee keessa jiru irratti saagdee beektaa, elementoota biroo irrattis hin ba’u? Gatiin hangas guddaa ta'e salphaatti elementii sana mul'ataan waan biraa kamiyyuu gubbaa kaa'uu qaba, elementoonni adda addaa hundi gatii gadi aanaa irratti saagaman ykn tasuma hin saagamne jennee fudhachuudhaan. Fuulli marsariitii yeroo baay’ee iddoo diimeshinii lamaa keessatti bakka bu’a; haa ta’u malee, amaloota CSS adda ta’an hojiirra oolchuudhaan, gadi fageenya dabarsuudhaaf xiyyaarri siiqqe z yaadame ni dhiyaata. Xiyyaarri kun iskiriinii irratti perpendikulaarii yoo ta’u, isa irraas, fayyadamaan tartiiba elementoota, tokko isa kaan gubbaatti hubata. Yaadni siiqqe z yaadame duuba jiru, hubannoo fayyadamaan elementoota tuulamaa irratti qabu, amaloonni CSS isa uumuun walitti makamuun waan nuti haala tuulama jennu uumuudha. Waa’ee akkaataa elementoonni fuula weebsaayitii irratti “tuulaman”, tartiiba tuulama maaltu akka to’atu, fi mala qabatamaa yeroo barbaachisaa ta’etti elementoota “unstack” gochuuf ni dubbanna. Waa'ee Haalawwan Tuuluu Fuulli marsariitii kee akka deeskii tokkootti yaadi. Akkuma elementoota HTML dabaltu, waraqaa, tokko tokkoon, deeskii irratti kaa’aa jirta. Waraqaan dhumaa kaa'ame elementii HTML dhiheenyatti dabalamee wajjin walqixa, akkasumas waraqaawwan biroo isa dura kaa'aman hunda gubbaa taa'a. Kun dhangala'aa galmee idilee ti, elementoota man'ee ta'aniif illee. Deeskiin mataan isaa haala tuutaa hundee bakka bu'a, elementii tiin uumame, kunis galmeewwan biroo hunda of keessaa qaba. Amma, qabeentota CSS adda ta'an tapha keessa seenu. Amaloonni akka iddoo (z-index waliin), opacity, transform, fi contain) akka galmee hojjetu. Galfataan kun elementii fi ijoollee isaa hunda fudhatee, tuullaa guddaa irraa isaan baasee, gara tuullaa xiqqaa adda ta'etti garee godha, waan nuti haala tuutaa jennu uuma. Elementiiwwan iddoo qabaniif, kun kan ta'u yeroo gatii z-index ofumaan ala labsinu. Amaloota akka opacity, transform, fi filter, haalatni tuutaa ofumaan yeroo gatiiwwan murtaa'an hojiirra oolan uuma.
Kana hubachuuf yaali: Waraqaan tokko (i.e., elementii mucaa) galmee keessa erga jiraatee booda (i.e., haala tuullaa warraa), gonkumaa galmee sana keessaa ba’uu hin danda’u ykn waraqaawwan galmee adda addaa keessa jiran gidduutti kaa’amuu hin danda’u. Z-index isaa amma galmee mataa isaa keessaa qofa barbaachisaa dha.
Fakkii armaan gadii keessatti, Waraqaan B amma haala tuutaa Galmee B keessa jira, fi waraqaawwan biroo galmee keessa jiran qofa waliin ajajamuu danda'a.
Yoo feete, galmee lama deeskii kee irratti akka qabdu yaadi:
.galmee-a { z-indeksii: 1; } . .galmee-b { z-indeksii: 2; } .
Mee markup xiqqoo haa update goonu. Galfata keessaa A fuula addaa, z-index: 9999. Galfata keessaa B fuula ifa ta'e, z-index: 5.
.fuula-addaa { z-index: 9999; } . .fuula-difaa { z-index: 5; } .
Fuulli kamtu gubbaa jira? It’s the .plain-page in Folder B. Browser waraqaawwan mucaa tuffatee galmeewwan lamaan dursee walitti tuula. Lama tokko caalaa akka ta'e waan beeknuuf Galmee B (z-index: 2) argee Galmee A (z-index: 1) gubbaa kaa'a. Gidduu kana, fuula .special-page gara z-index: 9999tti saagame yoo ta'ellee z-index isaa gatii ol'aanaa danda'amutti saagame iyyuu. Yaadannoowwan tuulamus man'ee ta'uu danda'u (galmeewwan galmeewwan keessaa), “muka maatii” uumuu. Qajeelfamni walfakkaataan ni hojjeta: mucaan tokko galmee warra isaa gonkumaa miliquu hin danda’u. Amma akkamitti haalawwan tuulama akka galmeewwan laayiyeroota garee fi irra deebi’anii tartiibeessanitti akka amala qaban erga argatte booda, gaafachuun barbaachisaadha: maaliif qabeentotni murtaa’an — akka jijjiirraa fi ifa hin taane — haalawwan tuullaa haaraa uumu? Wanti jiru kunooti: qabeentoonni kun sababa akkaataa isaan itti mul’ataniif haalawwan tuulama hin uumuu; akkaataa browser hood jala hojjetu irraa kan ka'e isaan kana godhu. Yeroo jijjiirraa, opacity, filter, ykn perspective hojiirra oolchitu, browser’tti, “Hey, elementiin kun socho’uu, naanneffamuu ykn fade ta’uu danda’a, kanaaf qophaa’i!”
Yeroo amaloota kana fayyadamtu, biraawzariin agarsiisa gahumsaan bulchuuf haalata tuutaa haaraa uuma. Kunis biraawzariin sochiiwwan, jijjiirraa, fi bu'aa mul'ataa of danda'ee akka qabatu hayyama, barbaachisummaa akkaataa qaamoleen kun fuula hafe waliin walqunnaman irra deebi'anii shallaguu hir'isa. Akka biraawzarichi, “Yeroo wanti keessa jiru jijjiiramu hundatti guutummaa deeskii jijjiiruu akkan hin qabneef galmee kana addaan nan qabadha” jedhee yaadi. Garuu ni jiramiidhaa cinaa. Erga biraawzariin elementii tokko gara laayibara mataa isaatti ol kaasee, waan isa keessa jiru hunda “dirree” gochuu qaba, haala tuullaa haaraa uumuu. Galmee tokko addaan baasuuf deeskii irraa fuudhuuti; wanti galmee sana keessa jiru hundi garee ta'a, amma biraawzariin yeroo maaltu maal gubbaa taa'a jedhee murteessu akka yuunitii tokkootti ilaala. Kanaafuu amaloonni jijjiirraa fi opacity akkaataa elementoonni mul’ataan itti tuulaman irratti dhiibbaa uumuu dhiisuu danda’anis, ni hojjetu, akkasumas raawwii fooyyessuuf. Amaloonni CSS biroo hedduunis sababa walfakkaataatiin haalawwan tuulama uumuu danda'u. MDN yoo gadi fageenyaan qotuu barbaadde tarree guutuu kenna. Muraasni kan jiran yoo ta’u, kunis osoo hin beekin haala tuulama uumuun hammam salphaa akka ta’e qofa kan agarsiisudha. Rakkoo “Unstacking” jedhu Dhimmi walitti tuuluu sababoota hedduudhaan ka’uu danda’a, garuu tokko tokko kaan caalaa baay’inaan mul’ata. Qaamonni moodaalii paateeniin kalaasikii dha sababiin isaas qaama sana elementoota biroo hunda caalaa laayibara gubbaa irratti akka “banuuf” jijjiiruu waan barbaadaniif, sana booda yeroo “cufamu” laayibara gubbaa irraa baasuu barbaadu. Hundi keenya haala moodaal banannee sababa kamiinuu hin mul’anne keessa akka jirru ofitti amanamummaa guddaan qaba. Sirnaan hin banamne jechuu osoo hin taane, haala tuulama keessaa laayibara gadii keessatti ijaan ala ta’uu isaati. Kun “akkamitti?” erga saagdee:
.wal-irratti kaa'uu { . bakka: dhaabbataa; /* haalata tuutaa uuma */ . z-indeksii: 1; /* elementii waan hundumaa olitti laayibarii irratti kaa'a */ . inset: 0; bal’inni: 100%; olka'iinsa: 100vh; dhangala’aa: dhokataa; halluu-duuba: #00000080; } .
Kun sirrii fakkaata, garuu yoo qaamni warraa kaka’umsa moodaalii of keessaa qabu elementii mucaa qaama warraa biraa keessaa kan akkasumas gara z-index: 1tti saagame ta’e, sun teeknikaan moodaalicha laayibarii xiqqaa galmee ijootiin dukkanaa’e keessa kaa’a. Mee haala addaa sanaa fi kiyyoowwan haala tuullaa (stacking-context) beekamoo ta’an tokko lama haa ilaallu. Osoo hin beekin haalawwan tuulama uumuun hammam salphaa akka ta’e qofa osoo hin taane, akkamitti akka dogoggoraan bulchitan ni argitu jedheen yaada. Akkasumas, akkamitti gara haala bulfameetti akka deebitu haala jiru irratti hundaa’a. Seenaa 1ffaa: Moodaalli Kiyyootti Qabame
Moodaalli kee battalumatti laayibara sadarkaa gadi aanaa keessatti qabamee arguu fi warra adda baasuu dandeessa. Eksteenshiniiwwan Browser Smart developers gargaaruuf dheerina ijaaraniiru. Meeshaaleen akka kanaa “CSS Stacking Context Inspector” Eksteenshinii Chrome caancala z-index dabalataa DevTools kee irratti dabaluudhaan odeeffannoo waa’ee elementoota haala tuulama uumuu uumuu danda’an sitti agarsiisu.
Eksteenshinii IDE Yeroo misoomaa dhimmoota illee dheerina akka kanaa VS Code tiif adda baasuu dandeessa, kunis dhimmoota haala tuulama ta'uu danda'an kallattiin gulaalaa kee keessatti calaqqisiisa.
Unstacking Fi To'annoo Deebisee Argachuu Hundee sababa isaa erga adda baasnee booda tarkaanfiin itti aanu isa ilaaluudha. Rakkoo kana furuuf malawwan fudhachuu dandeessan hedduutu jiru, tartiiba isaaniin tarreessa. Sadarkaa kamittuu nama kamiyyuu filachuu dandeessa, haa ta’u malee; namni tokko iyyachuus ta’e kan biraa gufachiisuu hin danda’u. Caasaa HTML Jijjiiri Kun akka sirreeffama gaarii ta’etti ilaalama. Dhimma haala tuulamaatti akka fiigduuf, elementoota tokko tokko HTML kee keessaa bakka qoosaa keessa kaa'uu qabda. Fuula irra deebi'ee gurmeessuun DOM irra deebitee bocuu fi rakkoo haala tuutaa dhabamsiisuuf si gargaara. Qabeentaa rakkoo qabu barbaadi fi qaama kiyyoo mallattoo HTML keessaa haqi. Fakkeenyaaf, haala jalqabaa, “The Trapped Modal,” .modal-container mataduree keessaa baasuun elementii
ofumaan kaa’uudhaan furuu dandeenya.Qabiyyeen kun z-index 2 qaba ammas moodaalicha hin uwwisu.Mata duree
Qabiyyee Ijoo
Mata duree Moodaalaa
Amma, ani homaa duuba hin jiru. Sababa gurmaa'insa haaraa DOMtiin ejjennoo fooyya'aa argadheera.
Yeroo button “Open Modal” jedhu cuqaastu, modal akka ta’uu qabutti waan biraa hunda fuulduratti argama. Seenaa Qalama 1: Moodaalli Kiyyoo (Furmaata) [forked] kan Shoyombo Gabriel Ayomide barreesse ilaali. Sirreessuu TheHaala Waliigalaa Warra CSS Keessatti Tuuluu Yoo elementiin sun kan osoo haalata hin cabsin sochoosuu hin dandeenye ta’e hoo? Dhimmicha ilaaluun gaariidha: warri haala dubbii hundeessa. Qabeentaa CSS (ykn qabeentota) itti gaafatamummaa yaada kakaasuuf qabu barbaadi fi haqi. Yoo kaayyoo qabaatee fi baafamuu hin dandeenye, warraaf gatii z-indeksii ol'aanaa elementoota obbolaa isaa caalaa kennitee guutummaa qabduu ol kaasuuf. Gatii z-indeksii ol'aanaa ta'een, qabduun warra gara gubbaatti socho'a, ijoolleen isaas fayyadamaatti dhihoo ta'anii mul'atu. Waan “The Submerged Dropdown” scenario keessatti baranne irratti hundaa’uun, dropdown navbar keessaa baasuu hin dandeenyu; hiika hin qabu ture. Haa ta’u malee, gatii z-index qabduu .navbar gatii z-index elementii .content’s akka caalu guddisuu dandeenya. .navbar { . duubbee: #333; /* z-indeksii: 1; */ z-indeksii: 3; ejjennoo: fira; } .
Jijjiirama kanaan, .dropdown-menu amma dhimma tokko malee qabiyyee fuulduratti mul'ata.
Seenaa Qalama 2: Kufaatii Bishaan (Furmaata) [forked] kan Shoyombo Gabriel Ayomide barreesse ilaali.
Portals Yaali, Yoo Framework Fayyadamte
Unkaalee akka React ykn Vue keessatti, Poortaaliin amala qaama sadarkaa warra isaa idileetiin ala DOM keessatti akka agarsiisu si dandeessisudha. Portals akka meeshaa teleportation components keessaniif ta'a. Isaan HTML qaama tokkoo bakka kamitti iyyuu galmee keessatti (yeroo baay’ee gara document.body) akka agarsiistu si hayyamu, yeroo inni pirooppoosii, haalata, fi taateewwaniif warra isaa isa jalqabaa wajjin loojikiidhaan walqabsiifamu. Kun kiyyoowwan yaada tuuta'uu miliquuf mijataa dha sababiin isaas firii agarsiifame jecha jechaatti qabduu warra rakkoo qabuun ala waan mul'atuuf.
ReactDOM.Portaala uumuu(
Kunis qabiyyeen kee kan gadi bu’u warra isaa duuba akka hin dhokanne mirkaneessa, yoo warri sun dhangala’aa qabaatus: dhokataa ykn z-index gadi aanaa. Seenaa “The Clipped Tooltip” kan duraan ilaalle keessatti, ani Portal fayyadamee tooltip dhangala’aa irraa baraareera: kilippii dhokataa qaama galmee keessa kaa’uu fi qabduu keessaa trigger olitti kaa’uudhaan. Seenaa Qalama 3: Meeshaa Ciccirame (Furmaata) [forked] kan Shoyombo Gabriel Ayomide barreesse ilaali. Haala Tuullaa (Stacking Context) Miidhaa Gamaa Malee Seensisuu Malawwan kutaa darbe keessatti ibsaman hundinuu elementoota haalawwan tuulama rakkoo qaban irraa “unstacking” gochuuf kan kaayyeffatan yoo ta’u, garuu haalli tokko tokko qabatamaan haala tuullaa uumuu si barbaachisu ykn uumuu barbaaddu jiru. Haala tuullaa haaraa uumuun salphaadha, garuu malawwan hundi bu'aa cinaa wajjin dhufu. Kunis, adda baafamuu fayyadamuu malee: adda baasuu. Yeroo elementii tokko irratti hojiirra oolu, haalli tuulama ijoollee elementii sanaa tokkoon tokkoon daa’imaa fi haala sana keessaa wajjin walqabatee murtaa’a, elementoota isa ala jiran irraa dhiibbaa uumuu irra. Fakkeenyi kalaasikii elementii sanaaf gatii negaatiivii ramaduudha, kan akka z-index: -1. Mee .card component akka qabdu yaadi. Boca faaya barruu .kaardii duuba taa’u, garuu duubbee kaardii gubbaatti dabaluu barbaadda. Kaardii irratti haala tuutaa malee, z-index: -1 boca gara jala haala tuullaa hundee (fuula guutuu) erga. Kunis duubbee adii .card’s duuba akka badu taasisa: Pen Negative z-index (rakkina) [forked] kan Shoyombo Gabriel Ayomide barreesse ilaali. Kana furuuf, adda baafamuu labsina: adda baasuu warra .card irratti: Pen Negative z-index (furmaata) [forked] kan Shoyombo Gabriel Ayomide barreesse ilaali. Amma, elementiin .card mataan isaa haala tuulama ta'a. Yeroo elementiin mucaa isaa — bocni faaya :before pseudo-element irratti uumame — z-index: -1 qabaatu, gara baay’ee jala haala tuulama warraa deema. Barreeffama duubaa fi duubbee kaardii gubbaatti haala gaariin taa’a, akkuma yaadameetti. Xumura Yaadadhu: yeroo itti aanutti z-index kee to’annaa ala ta’ee mul’atu, haala tuullaa kiyyootti galfame dha. Wabiiwwan
Haala walitti tuuluu (MDN) . Z-index fi haalawwan tuutaa (web.dev) . “Akkaataa Haala Tuullaa Haaraa Qabeentaa Addaan Baasuun CSS Keessatti Uumuu Dandeenyu”, Natalie Pina “What The Heck, z-index??”, Joosh Koomee
Dubbisa Dabalataa SmashingMag Irratti
“Pirojektoota Gurguddoo Keessatti CSS Z-Index Bulchuu”, Steven Freson “Mata dureewwan Maxxanan Fi Qaamolee Olka’iinsa Guutuu: Walnyaatinsa Gowwoomsaa”, Philip Braunen “Appilikeeshinii Weebii Qaamolee Irratti Hundaa’e Keessatti Z-Index Bulchuu”, Pavel Pomerantsev “Qabeenya CSS Z-Index: Ilaalcha Bal’aa”, Luwiis Laazaaris
