Èske w te janm mete z-index: 99999 sou yon eleman nan CSS ou a, epi li pa soti sou lòt eleman? Yon valè ki gwo ta dwe fasilman mete eleman sa a vizyèlman sou tèt nenpòt lòt bagay, sipoze tout eleman yo diferan yo mete nan swa yon valè ki pi ba oswa yo pa mete nan tout. Yon paj wèb anjeneral reprezante nan yon espas ki genyen de dimansyon; sepandan, lè w aplike pwopriyete espesifik CSS, yo prezante yon plan imajinè z-aks pou transmèt pwofondè. Avyon sa a se pèpandikilè ak ekran an, epi soti nan li, itilizatè a wè lòd la nan eleman, youn sou tèt lòt la. Lide ki dèyè imajinè z-aks la, pèsepsyon itilizatè a nan eleman anpile, se ke pwopriyete yo CSS ki kreye li konbine yo fòme sa nou rele yon kontèks anpile. Nou pral pale sou ki jan eleman yo "anpilye" sou yon paj wèb, ki sa ki kontwole lòd la anpile, ak apwòch pratik nan "dezame" eleman lè sa nesesè. Konsènan anpile kontèks Imajine paj wèb ou a kòm yon biwo. Pandan w ap ajoute eleman HTML, w ap mete moso papye, youn apre lòt, sou biwo a. Dènye moso papye yo mete a ekivalan a eleman HTML ki pi resan te ajoute a, epi li chita sou tout lòt papye yo mete devan li. Sa a se koule nan dokiman nòmal, menm pou eleman enbrike. Biwo a li menm reprezante kontèks anpile rasin lan, ki fòme pa eleman , ki gen tout lòt dosye. Koulye a, pwopriyete espesifik CSS antre nan jwèt. Pwopriyete tankou pozisyon (avèk z-endèks), opakite, transfòme, ak genyen) aji tankou yon katab. Katab sa a pran yon eleman ak tout pitit li yo, ekstrè yo nan pil prensipal la, epi gwoupe yo nan yon sou-pile separe, kreye sa nou rele yon kontèks anpile. Pou eleman pozisyone, sa rive lè nou deklare yon valè z-endèks ki pa oto. Pou pwopriyete tankou opakite, transfòme, ak filtre, kontèks la anpile kreye otomatikman lè yo aplike valè espesifik.
Eseye konprann sa a: Yon fwa yon moso papye (sa vle di, yon eleman timoun) andedan yon katab (sa vle di, kontèks anpile paran an), li pa janm ka soti nan katab sa a oswa yo pa janm ka mete l ant papye nan yon katab diferan. Z-endèks li yo kounye a se sèlman ki enpòtan andedan katab pwòp li yo.
Nan ilistrasyon ki anba a, Papye B se kounye a nan yon kontèks anpile nan Dosye B, epi li ka sèlman kòmande ak lòt papye nan katab la.
Imajine, si ou vle, ke ou gen de dosye sou biwo ou:
.folder-a { z-endèks: 1; } .folder-b { z-endèks: 2; }
Ann aktyalize mak la yon ti jan. Anndan Dosye A se yon paj espesyal, z-index: 9999. Anndan Dosye B se yon paj senp, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Ki paj ki anlè? Li nan .plain-paj la nan Dosye B. Navigatè a inyore papye timoun yo epi pile de dosye yo an premye. Li wè Dosye B (z-endèks: 2) epi li mete l anlè Dosye A (z-endèks: 1) paske nou konnen ke de pi gran pase youn. Pandan se tan, .special-paj la mete sou z-index: 9999 paj se nan pati anba a nan chemine a menm si z-endèks li yo mete nan valè ki pi wo posib. Anpile kontèks kapab tou anbrike (dosye andedan dosye), kreye yon "pyebwa fanmi." Menm prensip la aplike: yon timoun pa janm ka chape anba dosye paran li. Kounye a ke ou jwenn ki jan kontèks anpile konpòte yo tankou dosye ki gwoupe ak rekòmande kouch, li vo mande: poukisa sèten pwopriyete - tankou transfòme ak opakite - kreye nouvo kontèks anpile? Isit la nan bagay la: pwopriyete sa yo pa kreye kontèks anpile paske nan jan yo gade; yo fè li paske nan ki jan navigatè a ap travay anba kapo a. Lè w aplike transfòmasyon, opakite, filtre oswa pèspektiv, w ap di navigatè a, "Hey, eleman sa a ka deplase, vire, oswa fennen, kidonk pare!"
Lè ou itilize pwopriyete sa yo, navigatè a kreye yon nouvo kontèks anpile pou jere rann pi efikas. Sa a pèmèt navigatè a jere animasyon, transfòmasyon, ak efè vizyèl poukont li, sa ki redui bezwen pou rekalkile fason eleman sa yo kominike avèk rès paj la. Panse a li kòm navigatè a ki di, "Mwen pral jere katab sa a separeman pou mwen pa oblije remanje tout biwo a chak fwa yon bagay andedan li chanje." Men, genyenyon efè segondè. Yon fwa navigatè a leve yon eleman nan kouch pwòp li yo, li dwe "plati" tout bagay nan li, kreye yon nouvo kontèks anpile. Se tankou pran yon katab sou biwo a okipe li separeman; tout bagay andedan katab sa a vin gwoupe, epi navigatè a kounye a trete li kòm yon sèl inite lè w ap deside sa ki chita sou tèt sa. Se konsa, menm si pwopriyete yo transfòme ak opakite ta ka pa parèt afekte fason ke eleman yo pile vizyèlman, yo fè, epi li la pou optimize pèfòmans. Plizyè lòt pwopriyete CSS kapab tou kreye kontèks anpile pou rezon menm jan an. MDN bay yon lis konplè si ou vle fouye pi fon. Genyen byen kèk, ki sèlman montre kouman li fasil pou inadvèrtans kreye yon kontèks anpile san yo pa konnen li. Pwoblèm nan "Demake". Pwoblèm anpile ka parèt pou plizyè rezon, men gen kèk ki pi komen pase lòt. Konpozan modal yo se yon modèl klasik paske yo mande pou baskile eleman nan "louvri" sou yon kouch anwo pi wo a tout lòt eleman, epi retire li nan kouch anwo a lè li "fèmen". Mwen trè konfidan ke nou tout te kouri nan yon sitiyasyon kote nou louvri yon modal epi, pou kèlkeswa rezon, li pa parèt. Li pa ke li pa t 'louvri byen, men ke li se soti nan vi nan yon kouch pi ba nan kontèks la anpile. Sa a kite ou mande "ki jan fè?" depi ou mete:
.overlay { pozisyon: fiks; /* kreye kontèks anpile */ z-endèks: 1; /* mete eleman an sou yon kouch pi wo a tout lòt bagay */ insert: 0; lajè: 100%; wotè: 100vh; debòde: kache; background-koulè: #00000080; }
Sa a sanble kòrèk, men si eleman paran ki gen deklanche modal la se yon eleman pitit nan yon lòt eleman paran ki mete tou sou z-index: 1, sa teknikman mete modal la nan yon sous-kouch ki kache pa katab prensipal la. Ann gade nan senaryo espesifik sa a ak yon koup nan lòt enkonvenyans komen anpile-kontèks. Mwen panse ke ou pral wè non sèlman ki jan li fasil pou inadvèrtan kreye kontèks anpile, men tou, ki jan yo mal jere yo. Epitou, fason ou retounen nan yon eta jere depann sou sitiyasyon an. Senaryo 1: Modal la kwense
Ou ka imedyatman wè modal ou bloke nan yon kouch ki ba epi idantifye paran an. Ekstansyon navigatè Devlopè entelijan yo te bati ekstansyon pou ede. Zouti tankou ekstansyon Chrome "CSS Stacking Context Inspector" sa a ajoute yon onglet z-endèks siplemantè nan DevTools ou a pou montre w enfòmasyon sou eleman ki kreye yon kontèks anpile.
Ekstansyon IDE Ou ka menm wè pwoblèm pandan devlopman ak yon ekstansyon tankou sa a pou VS Code, ki mete aksan sou pwoblèm potansyèl kontèks anpile dirèkteman nan editè ou a.
Dechaje ak reprann kontwòl Apre nou te idantifye kòz rasin lan, pwochen etap la se fè fas ak li. Gen plizyè apwòch ou ka pran pou atake pwoblèm sa a, epi mwen pral lis yo nan lòd. Ou ka chwazi nenpòt moun nan nenpòt nivo, menm si; pèsonn pa ka plenyen oswa anpeche yon lòt. Chanje Estrikti HTML la Sa a konsidere kòm ranje pi bon an. Pou w antre nan yon pwoblèm kontèks anpile, ou dwe mete kèk eleman nan pozisyon komik nan HTML ou. Restriktirasyon paj la pral ede w refòme DOM la epi elimine pwoblèm nan kontèks anpile. Jwenn eleman pwoblèm nan epi retire li nan eleman pyèj la nan maketing HTML la. Pou egzanp, nou ka rezoud premye senaryo a, "The Trapped Modal," lè w deplase .modal-container la soti nan header la epi mete l nan eleman
pou kont li.Konteni sa a gen yon z-endèks 2 epi li p ap toujou kouvri modal la.Tèt
Pwensipal Kontni
Lè ou klike sou bouton "Open Modal" la, modal la pozisyone devan tout lòt bagay jan li sipoze ye. Gade senaryo plim 1: Modal la kwense (Solisyon) [forked] pa Shoyombo Gabriel Ayomide. Ajiste aKontèks anpile paran nan CSS E si eleman nan se youn ou pa ka deplase san yo pa kraze layout la? Li pi bon pou adrese pwoblèm nan: paran an etabli kontèks la. Jwenn pwopriyete CSS (oswa pwopriyete) ki responsab pou deklanche kontèks la epi retire li. Si li gen yon objektif epi li pa ka retire, bay paran an yon valè z-endèks ki pi wo pase eleman frè ak sè li yo pou leve tout veso a. Avèk yon valè z-endèks ki pi wo, veso paran an deplase nan tèt la, epi pitit li yo parèt pi pre itilizatè a. Dapre sa nou te aprann nan senaryo "The Submerged Dropdown", nou pa ka deplase dropdown la soti nan navbar la; li pa ta fè sans. Sepandan, nou ka ogmante valè z-endèks veso .navbar pou pi gran pase valè z-index eleman .content la. .navbar { background: #333; /* z-endèks: 1; */ z-endèks: 3; pozisyon: relatif; }
Ak chanjman sa a, .dropdown-meni an parèt kounye a devan kontni an san okenn pwoblèm.
Gade Senaryo 2 Pen an: Dropdown Submerged (Solisyon) [forked] pa Shoyombo Gabriel Ayomide.
Eseye Portal, si w ap itilize yon chapant
Nan kad tankou React oswa Vue, yon Portal se yon karakteristik ki pèmèt ou rann yon eleman deyò yerachi nòmal paran li nan DOM la. Portal yo tankou yon aparèy teleportasyon pou eleman ou yo. Yo pèmèt ou rann HTML yon eleman nenpòt kote nan dokiman an (tipikman dwa nan document.body) pandan y ap kenbe li lojikman konekte ak paran orijinal li pou akseswar, eta, ak evènman yo. Sa a se pafè pou chape anpile pyèj kontèks depi pwodiksyon an rann literalman parèt deyò veso paran an pwoblèm.
ReactDOM.createPortal(
Sa a asire kontni dropdown ou a pa kache dèyè paran li, menm si paran an gen debòde: kache oswa yon endèks z pi ba. Nan senaryo "The Clipped Tooltip" nou te gade pi bonè, mwen te itilize yon Portal pou sekou tooltip la nan debòde: clip kache lè m mete l nan kò dokiman an epi mete l anlè deklanche nan veso a. Gade senaryo plim 3 a: The Clipped Tooltip (Solution) [forked] pa Shoyombo Gabriel Ayomide. Prezante anpile kontèks san efè segondè Tout apwòch yo eksplike nan seksyon anvan an yo vize a "dezame" eleman ki soti nan kontèks anpile pwoblèm, men gen kèk sitiyasyon kote ou pral aktyèlman bezwen oswa vle kreye yon kontèks anpile. Kreye yon nouvo kontèks anpile fasil, men tout apwòch vini ak yon efè segondè. Sa vle di, eksepte pou itilize izolasyon: izole. Lè yo aplike nan yon eleman, kontèks anpile pitit eleman sa yo detèmine parapò ak chak timoun ak nan kontèks sa a, olye ke yo te enfliyanse pa eleman andeyò li. Yon egzanp klasik se bay eleman sa a yon valè negatif, tankou z-endèks: -1. Imajine ou gen yon eleman .card. Ou vle ajoute yon fòm dekoratif ki chita dèyè tèks .card la, men sou tèt background kat la. San yo pa yon kontèks anpile sou kat la, z-index: -1 voye fòm nan anba a nan kontèks la anpile rasin (tout paj la). Sa fè li disparèt dèyè background blan .card la: Gade Pen Negatif z-endèks (pwoblèm) [forked] pa Shoyombo Gabriel Ayomide. Pou rezoud sa a, nou deklare izolasyon: izole sou .card paran an: Gade Pen Negatif z-index (solisyon) [forked] pa Shoyombo Gabriel Ayomide. Koulye a, eleman .card la tèt li vin tounen yon kontèks anpile. Lè eleman pitit li a - fòm dekoratif ki te kreye sou :before pseudo-eleman - gen z-index: -1, li ale nan fon an nan kontèks anpile paran an. Li chita parfe dèyè tèks la ak sou tèt background kat la, jan yo gen entansyon. Konklizyon Sonje byen: pwochen fwa z-endèks ou a sanble soti nan kontwòl, li nan yon kontèks anpile kwense. Referans
Kontèks anpile (MDN) Z-endèks ak anpile kontèks (web.dev) "Kijan pou kreye yon nouvo kontèks anpile ak pwopriyete izolasyon nan CSS", Natalie Pina "Ki sa ki èk, z-endèks?", Josh Comeau
Plis Lekti Sou SmashingMag
"Jere CSS Z-Index nan gwo pwojè", Steven Frieson "Tèt kolan ak eleman plen wotè: yon konbinezon difisil", Philip Braunen "Jere Z-Index nan yon aplikasyon entènèt ki baze sou eleman", Pavel Pomerantsev "Z-Index CSS Pwopriyete a: Yon gade konplè", Louis Lazaris
