A o kile wa seta z-index: 99999 mo elementeng mo CSS ya gago, mme e sa tswe mo godimo ga dielemente tse dingwe? Boleng jo bogolo jalo bo tshwanetse go baya elemente eo bonolo ka pono mo godimo ga sengwe le sengwe se sele, go tsewa gore dielemente tsotlhe tse di farologaneng di beilwe ka boleng jo bo kwa tlase kgotsa ga di a bewa gotlhelele.
Tsebe ya webo gantsi e emelwa mo sebakeng sa tlhakorepedi; le fa go ntse jalo, ka go dirisa dithoto tse di rileng tsa CSS, go tsenngwa sefofane sa z-axis se se akanngwang go fetisa boteng. Sefofane seno se tlhamaletse mo sekirining, mme go tswa mo go sone, modirisi o lemoga tatelano ya dielemente, e nngwe e le mo godimo ga e nngwe. Kgopolo e e ka fa morago ga z-axis e e akanngwang, temogo ya modirisi ya dielemente tse di kgobokantsweng, ke gore dipharologantsho tsa CSS tse di e tlhamang di a kopana go bopa se re se bitsang bokao jwa go kgobokanya.
Re tlile go bua ka kafa dielemente di “kgobokanngwang” ka gone mo tsebeng ya webo, gore ke eng se se laolang tatelano ya go kgobokanngwa, le mekgwa e e mosola ya go “kgobokanya” dielemente fa di tlhokega.
Ka ga go Kgobokanya Diteng
Akanya fela tsebe ya gago ya webo e le tafole. Fa o ntse o tsenya dielemente tsa HTML, o baya dipampiri, ka go latelana, mo tafoleng. Pampiri ya bofelo e e beilweng e lekana le elemente ya HTML e e sa tswang go okediwa, mme e nna mo godimo ga dipampiri tse dingwe tsotlhe tse di beilweng fa pele ga yone. Ena ke phallo e tlwaelehileng ya tokomane, esita le bakeng sa dikarolo tse kentsweng. Tafole ka boyona e emela bokao jwa go kgobokanya medi, jo bo bopilweng ke elemente ya , e e nang le ditsholadifaele tse dingwe tsotlhe.
Jaanong, dithoto tse di rileng tsa CSS di tsena mo tirong.
Dipopego tse di tshwanang le boemo (ka z-index), go sa bonale, go fetola, le go nna le) di dira jaaka foltara. Foldara ena e nka elemente le bana bohle ba yona, e di ntsha ho tswa ho mokotla o moholo, mme e di hlophisa ho ba mokotla o monyane o fapaneng, e theha seo re se bitsang bokahare ba ho paka. Bakeng sa dikarolo tse behilweng, sena se etsahala ha re phatlalatsa boleng ba z-index ntle le auto. Bakeng sa dithoto tse kang opacity, phetoho, le sefepi, bokahare ba ho paka bo hlolwa ka boiketsetso ha boleng bo itseng bo sebediswa.
Leka go tlhaloganya seno: Fa pampiri (ke gore, elemente ya ngwana) e setse e le mo teng ga foltara (ke gore, bokao jwa go kgobokanya ga motsadi), ga e ka ke ya tswa mo foltareng eo kgotsa ya bewa fa gare ga dipampiri mo foltareng e nngwe. Z-index ya yone jaanong e maleba fela mo teng ga foltara ya yone.
Mo setshwantshong se se fa tlase, Pampiri B jaanong e mo teng ga bokao jwa go paka jwa Setsholadifaele B, mme e ka otariwa fela le dipampiri tse dingwe mo setsholadifaeleng.
Akanya fela, fa o batla, o na le ditsholadifaele tse pedi mo tafoleng ya gago:
A re ntšhwafatseng tshwao go sekae. Mo teng ga Setsholadifaele A go na le tsebe e e kgethegileng, z-index: 9999. Mo teng ga Setsholadifaele B go na le tsebe e e tlwaelegileng, z-index: 5.
Tsebe e e Kgethegileng
Tsebe e e Tlwaelegileng
.tsebe-e e kgethegileng { z-tshupane: 9999; }
.tsebe-e e tlwaelegileng { z-tshupane: 5; }
Ke tsebe efe e e kwa godimo?
Ke tsebe ya .plain mo Setsholadifaeleng B. Sebatli se itlhokomolosa dipampiri tsa bana mme se kgobokanya ditsholadifaele tse pedi pele. E bona Setsholadifaele B (z-index: 2) mme e e baya mo godimo ga Setsholadifaele A (z-index: 1) ka gonne re itse gore tse pedi di dikgolo go feta e le nngwe. Go sa le jalo, tsebe ya .special-e e setilweng go z-index: 9999 e kwa tlase ga mokgobo le fa z-index ya yone e setilwe go boleng jo bo kwa godimo jo bo kgonegang.
Diteng tsa go kgobokanya le tsone di ka tsenngwa (ditsholadifaele mo teng ga ditsholadifaele), go tlhama “setlhare sa lelapa.” Molaomotheo o o tshwanang o a dira: ngwana ga a ka ke a tshaba mo foltareng ya batsadi ba gagwe.
Jaanong ka o bona kafa diteng tsa go kgobokanya di itshwarang ka gone jaaka ditsholadifaele tse di kgobokanyang le go rulaganya gape dikarolo, go botlhokwa go botsa: ke eng fa dipopego dingwe — tse di jaaka go fetoga le go sa bonale sentle — di tlhama diteng tse disha tsa go kgobokanya?
Selo ke se: dipopego tse ga di tlhame diboka tsa go kgobokanya ka ntlha ya ka fa di lebegang ka teng; ba e dira ka ntlha ya kafa sebatli se dirang ka gone kafa tlase ga hood. Fa o dirisa phetogo, go sa bonale sentle, setlhotlhi, kgotsa pono, o bolelela sebatli gore, “Hei, elemente eno e ka nna ya tsamaya, ya dikologa, kgotsa ya nyelela, ka jalo nna o ipaakantse!”
Fa o dirisa dipopego tseno, sebatli se tlhama bokao jo bosha jwa go kgobokanya go laola go ranola ka tsela e e nang le matswela. Seno se dira gore sebatli se kgone go dirisa ditshwantsho tse di tshelang, diphetogo le ditlamorago tse di bonwang ka nosi, se fokotsa tlhokego ya go bala gape kafa dielemente tseno di dirisanang ka gone le tsebe yotlhe. Akanya ka gone jaaka fa sebatli se re, “Ke tla tshwara foltara eno kwa thoko gore ke se ka ka tlhoka go fetola tafole yotlhe nako le nako fa sengwe se se mo teng ga yone se fetoga.”
Mme go na leditlamorago. Fa sebatli se sena go tsholetsa elemente mo llageng ya sone, se tshwanetse go “phaphathisa” sengwe le sengwe se se mo teng ga sone, se tlhama bokao jo bosha jwa go paka. Go tshwana le go ntsha foltara mo tafoleng go e tshwara ka bongwe; sengwe le sengwe se se mo teng ga foltara eo se a kopanngwa, mme sebatli jaanong se se tshwara jaaka yuniti e le nngwe fa se dira tshwetso ya gore ke eng se se nnang mo godimo ga eng.
Ka jalo le fa dipharologantsho tsa phetogo le tsa go sa bonale di ka tswa di sa lebege di ama tsela e dielemente di kgobokanang ka yone ka pono, di a ama, mme ke tsa go tokafatsa tiragatso. Dithoto tse dingwe di le mmalwa tsa CSS le tsone di ka tlhama diteng tsa go kgobokanya ka mabaka a a tshwanang. MDN e neelana ka lenaane le le feletseng fa o batla go epa kwa teng. Go na le di le mmalwa thata, tse di bontshang fela ka fa go leng bonolo ka teng go tlhama bokao jwa go kgobokanya ka go sa lemoge o sa bo itse.
Bothata jwa “Go Kgobokanya”
Dikgang tsa go paka di ka tlhagelela ka ntlha ya mabaka a mantsi, mme mangwe a tlwaelegile go feta a mangwe. Dikarolo tsa Modal ke mokgwa wa bogologolo ka gonne di tlhoka go fetola karolo gore e “bulege” mo llageng e e kwa godimo e e kwa godimo ga dielemente tse dingwe tsotlhe, morago ga moo o bo o e tlosa mo llageng e e kwa godimo fa e “tswetswe.”
Ke na le bonnete ba gore rotlhe re kile ra kopana le seemo se mo go sone re bulang modal mme, ka ntlha ya lebaka lefe fela, ga o tlhagelele. Ga se gore ga e a bulega sentle, mme ke gore ga e bonwe mo llageng e e kwa tlase ya bokao jwa go paka.
Seno se go tlogela o ipotsa gore “go tla jang?” fa e sa le o seta:
.go apesa {
boemo: bo tlhomame; /* e tlhama bokao jwa go kgobokanya */
z-tshupane: 1; /* e baya elemente mo llageng e e kwa godimo ga sengwe le sengwe se sengwe */
tsenngwa: 0;
bophara: 100%;
bolelele: 100vh;
go phophoma: go fitlhegile;
mmala wa lemorago: #00000080;
}
Seno se lebega se nepile, mme fa elemente ya motsadi e e nang le setlhotlheletsi sa modal e le elemente ya ngwana mo teng ga elemente e nngwe ya motsadi e gape e setilwe go z-index: 1, e e beyang modal mo llagengpotlana e e fifaditsweng ke foltara e kgolo. A re lebeleleng boemo joo jo bo rileng le dirai tse dingwe di le mmalwa tse di tlwaelegileng tsa bokao jwa go kgobokanya. Ke akanya gore ga o kitla o bona fela kafa go leng bonolo ka gone go tlhama diteng tsa go kgobokanya o sa ikaelela, mme gape le kafa o ka di laolang ka tsela e e sa siamang ka gone. Gape, gore o boela jang kwa pusong e e laolwang go ikaegile ka boemo.
Boemo 1: Mokgwa o o Tshwaretsweng
O ka bona ka bonako modal wa gago o tshwaregile mo llageng ya maemo a a kwa tlase mme wa supa motsadi.
Dikatoloso tsa Sebatli
Batlhabolodi ba ba botlhale ba agile dikatoloso go thusa. Didiriswa tse di tshwanang le seno sa “Motlhatlhobi wa Bokao jwa go Kgobokanya jwa CSS” katoloso ya Chrome di tsenya thebo e nngwe ya z-index mo Didirisiweng tsa gago tsa DevTools go go bontsha tshedimosetso ka dielemente tse di tlhamang bokao jwa go kgobokanya.
Dikatoloso tsa IDE
O ka nna wa bona mathata ka nako ya tlhabololo ka katoloso e e tshwanang le eno ya VS Code, e e tlhagisang mathata a a ka nnang teng a bokao jwa go kgobokanya ka tlhamalalo morulaganyi wa gago.
Go Tlhabolola le go Bona Taolo Gape
Fa re sena go lemoga se se bakang bolwetse jono, kgato e e latelang ke go bo rarabolola. Go na le ditsela di le mmalwa tse o ka di dirisang go rarabolola bothata jono, mme ke tla di kwala ka tatelano. O ka tlhopha mongwe le mongwe mo maemong ape fela, le fa go ntse jalo; ga go ope yo o ka ngongoregang kgotsa a kgoreletsa yo mongwe.
Fetola Popego ya HTML
Sena se nkoa e le Optimum lokisa. Gore o kgone go kopana le bothata jwa bokao jwa go kgobokanya, o tshwanetse wa bo o beile dielemente dingwe mo maemong a a tshegisang mo teng ga HTML ya gago. Go rulaganya tsebe sešwa go tla go thusa go bopa DOM sešwa le go fedisa bothata jwa bokao jwa go kgobokanya. Batla elemente e e nang le bothata mme o e tlose mo elementeng ya go tshwara mo tshwaong ya HTML. Ka sekai, re ka rarabolola boemo jwa ntlha, “The Trapped Modal,” ka go ntsha .modal-container mo setlhogong le go se baya mo elementeng ya
ka boyone.
Setlhogo
Diteng tsa Botlhokwa
Diteng tseno di na le tshupane ya z ya 2 mme di sa ntse di ka se akaretse mofuta.
Setlhogo sa Mofuta
Jaanong, ga ke kwa morago ga sepe. Ke bone maemo a a botoka ka ntlha ya go rulaganngwa sešwa ga DOM.
Tswala
Fa o tobetsa konopo ya “Open Modal”, modal o bewa fa pele ga sengwe le sengwe se sengwe jaaka o tshwanetse go nna.
Bona Tiragalo ya Pene 1: Mofuta o o Tshwaretsweng (Tharabololo) [o o kgaogantsweng] ka Shoyombo Gabriel Ayomide.
FetolaBokao jwa go Paka ga Motsadi mo CSS
Go tweng fa elemente e le nngwe e o ka se kgoneng go e tsamaisa kwantle ga go thuba thulaganyo? Go botoka go rarabolola kgang: motsadi o tlhomamisa bokao. Batla thoto ya CSS (kgotsa dithoto) tse di nang le maikarabelo a go tsosa bokao mme o bo tlose. Fa e na le boikaelelo mme e sa kgone go tlosiwa, naya motsadi boleng jo bo kwa godimo jwa z-index go feta dielemente tsa yona tsa bana ba yone go tsholetsa setshodi sotlhe. Ka boleng bo hodimo ba z-index, setshelo sa motswadi se sutela hodimo, mme bana ba sona ba bonahala ba le haufi le mosebedisi.
Go ikaegile ka se re se ithutileng mo tiragalong ya “The Submerged Dropdown,” ga re kgone go ntsha lefoko le le fologang mo bareng ya go tsamaya; e ne e ka se dire tlhaloganyo. Le fa go ntse jalo, re ka oketsa boleng jwa z-index jwa setshodi sa .navbar gore bo nne bogolo go feta boleng jwa z-index jwa elemente ya .content.
.bara ya go tsamaya {
lemorago: #333;
/* z-tshupane: 1; */
z-tshupane: 3;
boemo: wa losika;
}
Ka phetogo eno, menyu wa .dropdown jaanong o tlhagelela fa pele ga diteng kwantle ga bothata bope.
Bona Tiragalo ya Pene 2: Go Fologa ga go Nwela (Tharabololo) [e e kgaogantsweng] ka Shoyombo Gabriel Ayomide.
Leka Di-Portal, Fa o Dirisa Letlhomeso
Mo matlhomesong a a tshwanang le React kgotsa Vue, Portal ke karolo e e go letlang go ranola karolo kwa ntle ga tatelano ya yone e e tlwaelegileng ya motsadi mo DOM. Di-portal di tshwana le sedirisiwa sa go fetisa dikarolo tsa gago ka thelebišene. Di go letla go ranola HTML ya karolo gongwe le gongwe mo tokomaneng (gantsi mo document.body) fa e ntse e e boloka e golagantswe ka tsela e e utlwalang le motsadi wa yone wa ntlhantlha go bona dithulaganyo, boemo, le ditiragalo. Se se siametse go tshaba dirai tsa bokao jwa go kgobokanya ka gonne dipholo tse di ranotsweng di tlhagelela tota kwa ntle ga setshodi sa motsadi se se nang le mathata.
TsibogoDOM.tlhamaKgoro(
,
mmele wa tokomane
);
Seno se tlhomamisa gore diteng tsa gago tse di latlhegang ga di fitlhege ka fa morago ga motsadi wa tsone, le fa motsadi a na le go elela: go fitlhegile kgotsa tshupane ya z e e kwa tlase.
Mo tiragalong ya “The Clipped Tooltip” e re e lebileng pelenyana, ke dirisitse Portal go namola tooltip mo go phopholeng: setshwantsho se se fitlhegileng ka go se baya mo mmeleng wa tokomane le go se baya fa godimo ga setlhotlheletsi mo teng ga setshodi.
Bona Tiragalo ya Pene 3: Ntlha ya Sedirisiwa e e Kgaotsweng (Tharabololo) [e e kgaogantsweng] ka Shoyombo Gabriel Ayomide.
Go Tlhagisa Bokao jwa go Kgobokanya Kwantle ga Ditlamorago
Mekgwa yotlhe e e tlhalositsweng mo karolong e e fetileng e ikaeletse go “tlhatlhoba” dielemente go tswa mo dilong tse di nang le mathata tsa go kgobokanya, mme go na le maemo mangwe a o tla tlhokang kgotsa o batla go tlhama bokao jwa go kgobokanya.
Go tlhama bokao jo bošwa jwa go paka go bonolo, fela mekgwa yotlhe e tla ka ditlamorago. Ke gore, ntle le go dirisa go itlhaola: itlhaola. Fa e dirisiwa mo elementeng, bokao jwa go kgobokanya jwa bana ba elemente eo bo laolwa go ya ka ngwana mongwe le mongwe le mo teng ga bokao joo, go na le go tlhotlhelediwa ke dielemente tse di kwa ntle ga yona. Sekao sa bogologolo ke go abela elemente eo boleng jo bo sa siamang, jaaka z-index: -1.
Akanya fela o na le karolo ya .card. O batla go tsenya popego ya mokgabiso e e nnang ka fa morago ga mokwalo wa .card, mme e le mo godimo ga lemorago la karata. Kwa ntle ga bokao jwa go paka mo karateng, z-index: -1 e romela popego kwa tlase ga bokao jwa go paka jwa modi (tsebe yotlhe). Seno se dira gore e nyelele ka fa morago ga lemorago le lesweu la .card:
Bona tshupane ya z ya Pene e e sa siamang (bothata) [e e kgaogantsweng] ke Shoyombo Gabariele Ayomide.
Go rarabolola se, re bolela go itlhaola: go itlhaola mo karateng ya motsadi:
Bona tshupane ya z ya Pene e e sa siamang (tharabololo) [e e kgaogantsweng] ke Shoyombo Gabariele Ayomide.
Jaanong, elemente ya .card ka boyone e nna bokao jwa go paka. Fa elemente ya yone ya ngwana — popego ya mokgabiso e e tlhamilweng mo :pele ga elemente ya maaka — e na le tshupane ya z: -1, e ya kwa tlase thata ga bokao jwa go kgobokanya jwa motsadi. E nna sentle ka fa morago ga mokwalo le mo godimo ga lemorago la karata, jaaka go ikaeletswe.
Bokhutlo
Gakologelwa: nako e e tlang fa z-index ya gago e lebega e sa laolege, ke bokao jo bo tshwaregileng jwa go kgobokanya.
Ditshupiso
Bokao jwa go kgobokanya (MDN)
Tshupane ya Z le bokao jwa go kgobokanya (web.dev)
“Kafa o ka Tlhamang Bokao jo Bosha jwa go Kgobokanya ka Thepa ya go Itlhaola mo CSS”, Natalie Pina
"Ke eng, tshupane ya z??", Josh Comeau
Puiso e nngwe mo SmashingMag
“Go Laola Tshupane ya Z ya CSS mo Diporojekeng Tse Dikgolo”, Steven Frieson
“Ditlhogo Tse di Kgomarelang Le Dielemente Tse di Boleele jo bo Tletseng: Motswako o o Boferefere”, Philip Braunen
“Go Laola Tshupane ya Z mo Tirisong ya Webo e e Theilweng mo Dikarolong”, Pavel Pomerantsev
“Thepa ya CSS ya Z-Index: Tebego e e Akaretsa”, Louis Lazaris
