Napadasam kadin nga inkeddeng ti z-index: 99999 iti maysa nga elemento iti CSS-mo, ket saan a rummuar iti rabaw dagiti dadduma nga elemento? Ti pateg a kasta ti kadakkelna ket nalaka koma a mangikabil iti dayta nga elemento a biswal iti rabaw ti ania man a sabali, nga ipapan nga amin dagiti nadumaduma nga elemento ket naikeddeng iti urayno nababbaba a pateg wenno saan a naikeddeng a pulos. Ti maysa a panid ti web ket kadawyan a naibagbaga iti dua-dimensional nga espasio; nupay kasta, babaen ti panangipakat kadagiti espesipiko a tagikua ti CSS, ti maysa nga imahinasion a z-aksis a plano ket naiyam-ammo tapno mangipatulod ti kauneg. Daytoy a plano ket perpendikular iti iskrin, ket manipud iti dayta, madlaw ti agus-usar ti urnos dagiti elemento, ti maysa iti rabaw ti sabali. Ti kapanunotan iti likudan ti imahinasion a z-axis, ti pannakaawat ti agar-aramat kadagiti naurnong nga elemento, ket dagiti tagikua ti CSS a mangparnuay iti daytoy ket agtipon tapno mangporma ti awagantayo a konteksto ti stacking. Pagsasaritaantayo no kasano a dagiti elemento ket “ma-stack” iti maysa a webpage, no ania ti mangkonkontrol iti urnos ti stacking, ken dagiti praktikal a pamay-an iti “unstack” nga elemento no kasapulan. Maipapan iti Panagtumpok kadagiti Konteksto Panunotem ti webpage-mo kas maysa a lamisaan. Bayat ti pananginayonmo kadagiti elemento ti HTML, mangikabilka kadagiti pedaso ti papel, agsasaruno, iti lamisaan. Ti maudi a pedaso ti papel a naikabil ket katupag ti kaudian a nainayon nga elemento ti HTML, ken daytoy ket agtugaw iti rabaw dagiti amin a dadduma a papel a naikabil iti sango daytoy. Daytoy ti gagangay nga ayus ti dokumento, urayno para kadagiti naisanglad nga elemento. Ti lamisaan a mismo ket mangibagi ti konteksto ti panagtuon ti ramut, a naporma babaen ti elemento ti , a naglaon kadagiti amin a dadduma pay a folder. Ita, dagiti espesipiko a tagikua ti CSS ket sumrek iti ay-ayam. Dagiti tagikua a kas ti posision (nga addaan iti z-index), opacity, transform, ken contain) ket agtignay a kas ti folder. Daytoy a folder ket mangala ti maysa nga elemento ken amin dagiti annakna, mangala kadagitoy manipud iti kangrunaan a stack, ken manggrupo kadagitoy iti naisina a sub-stack, a mangpartuat ti awagantayo a konteksto ti stacking. Para kadagiti naiposision nga elemento, daytoy ket mapasamak no ideklaratayo ti pateg ti z-index malaksid ti auto. Para kadagiti tagikua a kas ti opacity, panagbalbaliw, ken pagsala, ti konteksto ti panagtuon ket automatiko a naparsua no dagiti espesipiko a pateg ket maipakat.
Padasen a maawatan daytoy: Apaman a ti maysa a pedaso ti papel (i.e., maysa nga elemento ti ubing) ket adda iti uneg ti maysa a folder (i.e., ti konteksto ti panagtumpok ti nagannak), pulos a saan a makaruar iti dayta a folder wenno maikabil iti nagbaetan dagiti papeles iti sabali a folder. Ti z-index-na ket mainaig laeng itan iti uneg ti bukodna a folder.
Iti ilustrasion iti baba, ti Papel B ket adda itan iti uneg ti konteksto ti panagtuon ti Folder B, ken mabalin laeng nga orderen kadagiti sabali a papel iti folder.
Panunotem, no kayatmo, nga addaanka iti dua a folder iti lamisaanmo:
.folder-a { z-indeks: 1; } . .folder-b { z-indeks: 2; } .
I-updatetayo bassit ti markup. Iti uneg ti Folder A ket maysa nga espesial a panid, z-index: 9999. Iti uneg ti Folder B ket maysa a plain page, z-index: 5.
.naisangsangayan-a-panid { z-index: 9999; } . .plain-panid { z-indeks: 5; } .
Ania a panid ti adda iti ngato? It’s the .plain-page in Folder B. Ti browser ket di ikankano dagiti child papers ken i-stack nga umuna ti dua a folder. Makitana ti Folder B (z-index: 2) ket ikabilna iti rabaw ti Folder A (z-index: 1) gapu ta ammotayo a dakdakkel ti dua ngem maysa. Kabayatanna, ti .special-page a naikeddeng iti z-index: 9999 a panid ket adda iti baba ti stack urayno ti z-index na ket naikeddeng iti kangatuan a mabalin a pateg. Mabalin met nga i-nest dagiti konteksto ti panagtumpok (dagiti folder iti uneg dagiti folder), a mangparnuay iti “kayo ti pamilia.” Agaplikar met laeng ti prinsipio: saan a pulos a makalisi ti ubing iti folder dagiti nagannakna. Ita ta magun-odmo no kasano ti panagtignay dagiti konteksto ti panagtuon a kas dagiti folder a manggrupo ken mangurnos manen kadagiti sapasap, maikari a damagen: apay a dagiti sumagmamano a tagikua — kas ti panagbalbaliw ken opacity — ket mangpartuat kadagiti baro a konteksto ti panagtuon? Ania’t banag: dagitoy a tagikua ket dida mangparnuay kadagiti konteksto ti panagtumpok gapu iti no kasano ti langada; aramidenda dayta gapu iti panagandar ti browser iti sirok ti hood. No iyaplikarmo ti transform, opacity, filter, wenno perspective, ibagbagam iti browser, “Hoy, mabalin nga aggaraw, agturong, wenno agkupas daytoy nga elemento, isu nga agsaganaka!”
No usarem dagitoy a tagikua, ti browser ket mangpartuat ti baro a konteksto ti panagtuon tapno ad-adda nga episiente ti panangituray ti panagiparang. Daytoy ket mangipalubos ti browser a mangasikaso kadagiti animasion, panagbalbaliw, ken dagiti biswal nga epekto nga agwaywayas, a mangkissay ti panagkasapulan a mangkuenta manen no kasano a dagitoy nga elemento ket makilanglangen kadagiti nabati a paset ti panid. Panunotem a kas kuna ti browser, “I’ll handle this folder this folder tapno diak kasapulan a baliwan ti intero a lamisaan tunggal adda agbaliw iti uneg dayta.” Ngem addamaysa nga epekto. Apaman nga ipangato ti browser ti maysa nga elemento iti bukodna a layer, masapul a “patadna” ti amin nga adda iti uneg daytoy, a mangpataud iti baro a konteksto ti stacking. Kasla panangikkat iti folder manipud iti lamisaan tapno maisina a maiggaman dayta; amin nga adda iti uneg dayta a folder ket magrupo, ken ti browser ket tratuenna itan daytoy a kas maymaysa a yunit no mangikeddeng no ania ti agtugaw iti rabaw ti ania. Isu nga urayno dagiti tagikua ti panagbalbaliw ken opacity ket mabalin a saan a kasla mangapektar ti wagas a dagiti elemento ket agtumpok iti biswal, aramidenda, ken daytoy ket para iti panagoptimisar ti panagaramid. Sumagmamano a dadduma pay a tagikua ti CSS ket mabalin pay a mangpartuat kadagiti konteksto ti panagtuon para kadagiti kapada a rason. Mangipaay ti MDN iti kompleto a listaan no kayatmo ti agkali iti naun-uneg. Adda medyo sumagmamano, a mangiladawan laeng no kasano kalalaka ti di inggagara a mangparnuay iti konteksto ti panagtumpok a di ammo dayta. Ti Problema ti “Unstacking.” Mabalin a tumaud dagiti isyu iti panagtumpok gapu iti adu a rason, ngem ad-adda a gagangay ti dadduma ngem iti dadduma. Dagiti modal a paset ket maysa a klasiko a padron gapu ta kasapulanda ti panangi-toggle iti paset tapno “aglukat” iti maysa a makinngato a suson iti ngato ti amin a dadduma nga elemento, kalpasanna ikkaten dayta manipud iti makinngato a suson no “naserraan.” I’m pretty confident nga amin tayo ket nakataray iti kasasaad a manglukattayo iti modal ket, iti aniaman a rason, saan nga agparang. Saan a saan a nasayaat ti pannakalukatna, no di ket saan a makita iti nababbaba a suson ti konteksto ti stacking. Daytoy ti mangbaybay-a kenka a mangpanunot “kasano nga umay?” sipud idi insetmo ti:
.panag-overlay { . posision: naikeddeng; /* mangpartuat ti konteksto ti panagtumpok */ . z-indeks: 1 nga; /* ikabilna ti elemento iti maysa a suson iti ngato ti amin a dadduma pay */ inset: 0; kalawa: 100%; katayag: 100vh; overflow: nailemmeng; kolor-ti-likud: #00000080; } .
Daytoy ket agparang nga umiso, ngem no ti nagannak nga elemento a naglaon ti modal a trigger ket maysa nga ubing nga elemento iti uneg ti sabali a nagannak nga elemento a naikeddeng met iti z-index: 1, a teknikal a mangikabil ti modal iti maysa a sublayer a nalidem babaen ti kangrunaan a folder. Kitaentayo dayta espesipiko nga eksena ken ti dua pay a gagangay a silo iti stacking-context. Panagkunak saan laeng a makitam no kasano kalalaka ti di inggagara a mangparnuay kadagiti konteksto ti stacking, no di ket no kasano pay a di umiso ti panangtarawidwid kadagitoy. Kasta met, no kasano ti panagsublim iti managed state ket agpannuray iti kasasaad. Senario 1: Ti Nasiluan a Modal
Dagus a makitam ti modal-mo a naibalud iti nababa nga antas a suson ken mailasin ti nagannak. Dagiti Ekstension ti Browser Dagiti masirib a developer ket nangaramidda kadagiti ekstension tapno makatulong. Dagiti ramit a kas iti daytoy a “CSS Stacking Context Inspector” Chrome extension ket mangnayon iti ekstra a z-index tab iti DevTools-mo tapno maipakita kenka ti impormasion maipapan kadagiti elemento a mangparnuay iti stacking context.
Dagiti Ekstension ti IDE Mabalinmo pay a makita dagiti isyu bayat ti panagrang-ay babaen ti maysa nga ekstension a kas daytoy para iti VS Code, a mangitag-ay kadagiti potensial nga isyu ti konteksto ti panagtumpok a direkta iti editormo.
Unstacking Ken Pananggun-od Manen iti Kontrol Kalpasan a nailasintayo ti ramut, ti sumaganad nga addang ket ti panangtaming iti dayta. Adda sumagmamano a pamay-an a mabalinmo nga aramiden tapno mataming daytoy a parikut, ket ilistak dagita nga agsasaruno. Mabalinmo ti agpili iti asinoman iti aniaman a tukad, nupay kasta; awan ti makareklamo wenno makalapped iti sabali. Baliwan Ti Estruktura ti HTML Maibilang daytoy a optimal fix. Para kenka a makataray iti isyu ti konteksto ti panagtumpok, masapul nga inkabilmo ti sumagmamano nga elemento kadagiti nakakatkatawa a posision iti uneg ti HTML-mo. Ti panangistruktura manen ti panid ket makatulong kenka a mangporma manen ti DOM ken mangikkat ti parikut ti konteksto ti panagtuon. Sapulen ti problematiko nga elemento ken ikkaten daytoy manipud iti trapping element iti HTML markup. Kas pagarigan, mabalintayo a solbaren ti umuna nga eksena, “Ti Nasiluan a Modal,” babaen ti panangiyakar ti .modal-container manipud iti ulo ken panangikabil iti daytoy iti
nga elemento a bukodna.Daytoy a linaon ket addaan iti z-index iti 2 ken saan pay laeng a mangsaklaw ti modal.Ulo
Kangrunaan a Linaon
Modal a Paulo
Ita, awan ti likudanko. Nasaysayaat ti posisionko kas resulta ti DOM restructuring.
No i-click-mo ti “Open Modal” button, ti modal ket maiposision iti sango ti amin a dadduma pay a kas iti rumbeng. Kitaen ti Senaryo ti Pluma 1: Ti Nasiluan a Modal (Solusion) [natinidor] ni Shoyombo Gabriel Ayomide. I-adjust TiKonteksto ti Panagtumpok ti Nagannak Iti CSS Kasano ngay no ti elemento ket maysa a dimo mabalin nga iyakar a dimo mapirsay ti layout? Nasaysayaat no tamingen ti isyu: ti nagannak ti mangipasdek iti konteksto. Sapulen ti tagikua ti CSS (wenno dagiti tagikua) a responsable iti panangtignay ti konteksto ken ikkaten daytoy. No daytoy ket addaan iti panggep ken saan a maikkat, ikkan ti nagannak ti nangatngato a pateg ti z-index ngem dagiti kakabsatna nga elemento tapno maipangato ti sibubukel a pagkargaan. Iti nangatngato a pateg ti z-index, ti nagannak a paglaon ket umakar iti ngato, ken dagiti annakna ket agparang nga as-asideg iti agar-aramat. Maibatay iti nasursurotayo iti “The Submerged Dropdown” scenario, ditay’ mayakar ti dropdown manipud iti navbar; saan koma nga adda kaipapanan dayta. Nupay kasta, mabalintayo a paaduen ti pateg ti z-index ti paglaon ti .navbar tapno dakdakkel ngem ti pateg ti z-index ti elemento ti .content. .navbar nga { . likudan: #333; /* z-indeks: 1; */ z-indeks: 3 nga; posision: relatibo; } .
Iti daytoy a panagbalbaliw, agparang itan ti .dropdown-menu iti sango ti linaon nga awan ti aniaman nga isyu.
Kitaen ti Senaryo ti Pluma 2: Ti Nailumlom a Panagbaba (Solusion) [natinidor] ni Shoyombo Gabriel Ayomide.
Padasen dagiti Portal, No Agus-usar iti Balangkas
Kadagiti balbalay a kas ti React wenno Vue, ti Portal ket maysa a tampok a mangipalubos kenka a mangiparang ti maysa a paset iti ruar ti gagangay a nagannak a hirarkiana iti DOM. Dagiti portal ket kasla teleportation device para kadagiti components-mo. Bay-andaka a mangiparang iti HTML ti maysa a paset iti sadinoman iti dokumento (kadawyan a mismo iti document.body) bayat a pagtalinaedenda a lohikal a konektado iti orihinal a nagannakna para kadagiti props, estado, ken pasamak. Daytoy ket perpekto para iti panaglisi kadagiti silo ti konteksto ti panagtuon manipud idi ti naiparang a rimmuar ket literal nga agparang iti ruar ti problemado a nagannak a paglaon.
ReactDOM.agpartuat ti Portal ( .
Daytoy ket mangsigurado a ti linaon ti dropdown-mo ket saan a nailemmeng iti likudan ti nagannakna, urayno ti nagannak ket addaan iti overflow: nailemmeng wenno nababbaba a z-index. Iti senario a “The Clipped Tooltip” a kinitatayo itay, nagusarak iti Portal a mangisalakan iti tooltip manipud iti overflow: nailemmeng a clip babaen ti panangikabil iti bagi ti dokumento ken panangiposision iti ngato ti trigger iti uneg ti container. Kitaen ti Senaryo ti Pluma 3: Ti Naputed a Tooltip (Solusion) [natinidor] ni Shoyombo Gabriel Ayomide. Panangyam-ammo iti Stacking Context nga Awan ti Side Effects Amin dagiti pamay-an a nailawlawag iti napalabas a benneg ket nairanta kadagiti “panag-unstacking” nga elemento manipud kadagiti problemado a konteksto ti panagtumpok, ngem adda dagiti sumagmamano a kasasaad a sadiay ket aktual a kasapulam wenno kayatmo ti mangpartuat ti konteksto ti panagtumpok. Nalaka ti mangparnuay iti baro a konteksto ti stacking, ngem amin nga approach ket addaan iti side effect. Kayatna a sawen, malaksid iti panagusar iti isolation: isolate. No mayaplikar iti maysa nga elemento, ti konteksto ti panagtumpok dagiti annak dayta nga elemento ket maikeddeng no maidilig iti tunggal ubing ken iti uneg dayta a konteksto, imbes a maimpluensiaan kadagiti elemento iti ruar dayta. Ti klasiko a pagarigan ket ti panangituding iti dayta nga elemento iti negatibo a pateg, a kas ti z-index: -1. Panunotem nga addaanka iti .card component. Kayatmo ti mangnayon iti dekoratibo a sukog nga agtugaw iti likudan ti teksto ti .card, ngem iti rabaw ti background ti kard. No awan ti konteksto ti panagtumpok iti kard, ti z-index: -1 ket mangipatulod ti sukog iti baba ti ramut a konteksto ti panagtuon (ti sibubukel a panid). Daytoy ti mamagbalin iti dayta a mapukaw iti likudan ti puraw a background ti .card: Kitaen ti Pen Negative z-index (problema) [natinidor] babaen ni Shoyombo Gabriel Ayomide. Tapno masolbar daytoy, ideklaratayo ti panagbukod: isolate iti nagannak a .card: Kitaen ti Pen Negative z-index (solusion) [natinidor] babaen ni Shoyombo Gabriel Ayomide. Ita, ti elemento a .card a mismo ket agbalin a konteksto ti panagtumpok. No ti anak nga elementona — ti dekoratibo a sukog a naparsua iti :sakbay a pseudo-element — ket addaan iti z-index: -1, mapan daytoy iti baba unay ti konteksto ti panagtuon ti nagannak. Naan-anay nga agtugaw dayta iti likudan ti teksto ken iti rabaw ti background ti kard, kas nairanta. Konklusion Laglagipem: inton sumaruno a kasla saan a makontrol ti z-index-mo, maysa dayta a naibalud a konteksto ti stacking. Dagiti Reperensia
Konteksto ti panagtumpok (MDN) . Z-index ken dagiti konteksto ti panagtuon (web.dev) . “Kasano ti Mangpartuat ti Baro a Konteksto ti Panagtumpok babaen ti Sanikua ti Panagbukod iti CSS”, Natalie Pina “Ania Ti Heck, z-index??”, Josh Comeau
Kanayonan a Panagbasa Iti SmashingMag
“Panangituray ti CSS Z-Index Kadagiti Dakkel a Proyekto”, Steven Frieson “Dagiti Napigket nga Ulo Ken Dagiti Naan-anay-Katayag nga Elemento: Ti Narikut a Kombinasion”, Philip Braunen “Panangtarawidwid ti Z-Index Iti Aplikasion ti Web a Naibatay iti Komponente”, Pavel Pomerantsev “Ti Z-Index a Sanikua ti CSS: Ti Komprehensibo a Panagkita”, Louis Lazaris
