So wode z-index: 99999 ahyɛ element bi so pɛn wɔ wo CSS mu, na ɛnpue wɔ element afoforo so pɛn? Ɛsɛ sɛ botae a ɛsõ saa no de saa ade no si biribi foforo biara so wɔ aniwa so ntɛm ara, na yɛfa no sɛ wɔde nneɛma ahorow no nyinaa asi bo a ɛba fam so anaasɛ wɔanhyehyɛ koraa. Wɔtaa gyina hɔ ma wɛbsaet krataafa bi wɔ baabi a ɛwɔ afã abien; nanso, ɛdenam CSS su pɔtee bi a wɔde di dwuma so no, wɔde z-axis plane a wɔde wɔn adwene bu ba de kyerɛ bun. Saa wimhyɛn yi gyina screen no so, na efi mu no, nea ɔde di dwuma no hu sɛnea nneɛma ahorow no nnidiso nnidiso, biako wɔ foforo so. Adwene a ɛwɔ adwene mu z-axis akyi, ɔdefoɔ no adwene wɔ stacked elements ho, ne sɛ CSS properties a ɛbɔ no no ka bom yɛ deɛ yɛfrɛ no stacking context. Yɛrebɛka sɛnea wɔde element ahorow “boaboa ano” wɔ wɛbsaet krataafa bi so, nea ɛhwɛ sɛnea wɔde nneɛma gu so, ne akwan a mfaso wɔ so a wɔfa so “yi” element ahorow bere a ɛho hia no ho asɛm. Ɛfa Stacking Contexts ho Fa no sɛ wo wɛbsaet krataafa no yɛ pon. Bere a wode HTML elements ka ho no, wode nkrataa asinasin, mmiako mmiako, ato pon no so. Krataa a etwa to a wɔde asi hɔ no ne HTML ade a wɔde aka ho nnansa yi ara no yɛ pɛ, na ɛtra nkrataa afoforo a wɔde ahyɛ n’anim no nyinaa atifi. Eyi ne document flow a ɛyɛ daa, mpo ma nested elements. Desk no ankasa gyina hɔ ma root stacking context, a element no na ɛhyehyɛe, a ɛwɔ folda afoforo nyinaa. Afei, CSS agyapade pɔtee bi ba asɛm no mu. Nneɛma te sɛ gyinabea (a z-index ka ho), opacity, transform, ne contain) yɛ adwuma te sɛ folda. Saa folda yi fa element bi ne ne mma nyinaa, yi wɔn fi stack titiriw no mu, na ɛkyekyɛ wɔn mu ma ɛyɛ sub-stack a ɛyɛ soronko, na ɛyɛ nea yɛfrɛ no stacking context. Wɔ positioned elements ho no, eyi ba bere a yɛpae mu ka z-index value a ɛnyɛ auto. Wɔ agyapadeɛ te sɛ opacity, transform, ne filter ho no, wɔbɔ stacking context no ara kwa berɛ a wɔde value pɔtee bi di dwuma.
Bɔ mmɔden sɛ wobɛte eyi ase: Sɛ krataa bi (i.e., abofra element) bi wɔ folda bi mu pɛ (i.e., ɔwofo no stacking context) a, entumi mfi saa folda no mu da anaasɛ entumi mfa nhyɛ nkrataa ntam wɔ folda foforo mu. Mprempren ne z-index no fa n’ankasa folda no mu nkutoo.
Wɔ mfonini a ɛwɔ aseɛ ha yi mu no, seesei Krataa B wɔ stacking context a ɛwɔ Folder B no mu, na wɔbɛtumi akra ne nkrataa foforɔ a ɛwɔ folda no mu nko ara.
Fa no sɛ, sɛ wopɛ a, fa no sɛ wowɔ folda abien wɔ wo pon so:
.folda-a { z-index: 1; } . .folda-b { z-index: 2; } .
Momma yɛnyɛ markup no foforo kakra. Folda A mu no yɛ kratafa soronko, z-index: 9999. Folda B mu no yɛ kratafa a ɛnyɛ den, z-index: 5.
.kratafa-titiriw { z-index: 9999; } . .kratafa-kratafa { z-index: 5; } .
Kratafa bɛn na ɛwɔ soro? It’s the .plain-page in Folder B. Browser no bu n’ani gu mmofra nkrataa no so na edi kan boaboa folda abien no ano. Ɛhu Folda B (z-index: 2) na ɛde si Folda A (z-index: 1) atifi efisɛ yenim sɛ abien sõ sen biako. Saa bere yi nyinaa, .special-page a wɔde asi hɔ sɛ z-index: 9999 krataafa no wɔ stack no ase ɛwom mpo sɛ wɔde ne z-index no asi bo a ɛkorɔn sen biara a ebetumi aba so. Stacking contexts nso betumi ayɛ nested (folders a ɛwɔ folders mu), ayɛ “abusua dua.” Nnyinasosɛm koro no ara fa ho: abofra ntumi nkwati n’awofo folda da. Seesei a woanya sɛnea stacking contexts yɛ wɔn ade te sɛ folders a ɛboaboa layers ano na ɛsan hyehyɛ no, ɛfata sɛ wobisa sɛ: dɛn nti na properties bi — te sɛ transform ne opacity — yɛ stacking contexts foforo? Adeɛ no nie: saa agyapadeɛ yi nnyɛ stacking contexts ɛnam sɛdeɛ ɛteɛ nti; wɔyɛ saa esiane sɛnea browser no yɛ adwuma wɔ hood no ase nti. Sɛ wode transform, opacity, filter, anaa perspective di dwuma a, na woreka akyerɛ browser no sɛ, “Hey, ebia saa element yi bɛkɔ, ɛbɛdannan, anaasɛ ɛbɛyera, enti yɛ krado!”
Sɛ wode saa agyapadeɛ yi di dwuma a, browser no yɛ stacking context foforɔ de hwɛ rendering so yie. Wei ma browser no tumi di animations, transforms, ne visual effects ho dwuma wɔ ne ho, na ɛtew hia a ehia sɛ wɔsan bu sɛnea saa nneɛma yi ne kratafa no fã a aka no di nkitaho no so. Fa no sɛ browser no ka sɛ, “Medi saa folda yi ho dwuma wɔ ɔkwan soronko so sɛnea ɛbɛyɛ a ɛho renhia sɛ mesesa desk no nyinaa bere biara a biribi a ɛwɔ mu bɛsesa no.” Nanso ɛwɔ hɔɔhaw bi a ɛde ba. Sɛ browser no ma element bi so kɔ n’ankasa layer mu pɛ a, ɛsɛ sɛ “ɛyɛ tratraa” biribiara a ɛwɔ mu, na ɛma stacking context foforo ba. Ɛte sɛ nea woayi folda bi afi pon so de adi ho dwuma wɔ ɔkwan soronko so; biribiara a ɛwɔ saa folda no mu no nya akuwakuw, na afei browser no fa no sɛ ade biako bere a ɛresi nea ɛtra nea ɛwɔ so ho gyinae no. Enti ɛwom mpo sɛ ebia ɛbɛyɛ te sɛ nea transform ne opacity properties no rennya ɔkwan a elements stack wɔ visually so nkɛntɛnso de, nanso ɛyɛ, na ɛyɛ ma performance optimisation. CSS agyapadeɛ foforɔ pii nso tumi yɛ stacking contexts ɛnam nteaseɛ a ɛte saa ara nti. MDN de list a edi mũ ma sɛ wopɛ sɛ wotutu kɔ akyiri a. Kakraa bi wɔ hɔ, a ɛkyerɛ sɛnea ɛyɛ mmerɛw sɛ wobɛbɔ stacking context a wunnim no ara kwa. “Unstacking” Ɔhaw no Nneɛma pii nti na nsɛm a ɛfa stacking ho betumi asɔre, nanso ebinom abu so sen afoforo. Modal components yɛ classic pattern efisɛ ɛhwehwɛ sɛ wɔsesa component no ma “bue” wɔ soro layer bi so sen element afoforo nyinaa, afei woyi fi soro layer no mu bere a “wɔato mu.” I’m pretty confident sɛ yɛn nyinaa atu mmirika akɔ tebea bi a yɛbue modal bi mu na, nea enti a ɛte saa no, ɛnna adi. Ɛnyɛ sɛ ɛnbue yie, na mmom sɛ ɛnyɛ nea wobɛhunu wɔ stacking context no layer a ɛwɔ fam mu. Eyi ma wususuw ho sɛ “ɛyɛ dɛn na ɛbae?” efisɛ wode sii hɔ sɛ:
.akata so { . gyinabea: nea wɔasiesie; /* yɛ stacking nsɛm a ɛfa ho */ . z-nsɛmfua: 1; /* de element no to layer bi so wɔ biribiara a aka so */ nea wɔde ahyɛ mu: 0; ne tɛtrɛtɛ: 100%; ne sorokɔ: 100vh; overflow: nea wɔde asie; akyi-kɔla: #00000080; } .
Eyi hwɛ sɛ ɛteɛ, nanso sɛ ɔwofo element a modal trigger no wom no yɛ abofra element wɔ ɔwofo element foforo mu a ɛno nso de asi hɔ sɛ z-index: 1, ɛno de modal no si mfiridwuma mu wɔ sublayer a folda titiriw no akata so. Momma yɛnhwɛ saa tebea pɔtee no ne afiri afoforo abien a ɛtaa ba wɔ stacking-context mu. Misusuw sɛ ɛnyɛ sɛnea ɛyɛ mmerɛw sɛ wobɛbɔ stacking contexts nko na wubehu, na mmom sɛnea wobɛhwɛ so yiye nso. Afei nso, sɛnea wobɛsan akɔ tebea a wɔhwɛ so mu no gyina tebea no so. Nsɛm a Ɛto so 1: Modal a Wɔakyere no
Wubetumi ahu ntɛm ara sɛ wo modal no akɔhyɛ layer a ɛba fam mu na woahu ɔwofo no. Browser Ntrɛwmu Smart developers ayɛ extensions a ɛbɛboa. Nnwinnade te sɛ “CSS Stacking Context Inspector” Chrome ntrɛwmu yi de z-index tab foforo ka wo DevTools ho de kyerɛ wo nsɛm a ɛfa nneɛma a ɛma stacking context ho.
IDE Ntrɛwmu Wubetumi mpo ahu nsɛmnsɛm wɔ nkɔsoɔ mu denam ntrɛmu te sɛ yei ma VS Code, a ɛtwe adwene si nsɛm a ɛbɛtumi aba stacking context so tẽẽ wɔ wo editor no mu.
Unstacking Na Wɔsan Nya Nkonimdi Bere a yɛahu nea ɛde ba no ntini akyi no, ade a edi hɔ a ɛsɛ sɛ yɛyɛ ne sɛ yebedi ho dwuma. Akwan pii wɔ hɔ a wubetumi afa so adi ɔhaw yi ho dwuma, na mɛbobɔ din nnidiso nnidiso. Nanso, wubetumi apaw obiara wɔ ɔfã biara mu; obiara ntumi nwiinwii anaa nsiw ɔfoforo kwan. Sesa HTML Nhyehyɛe no Wobu eyi sɛ ɛyɛ nsiesie a eye sen biara. Sɛ wobɛtu mmirika akɔ stacking context issue mu a, ɛsɛ sɛ wode elements bi ahyɛ serew gyinabea wɔ wo HTML mu. Sɛ wosan hyehyɛ krataafa no a, ɛbɛboa wo ma woasan ayɛ DOM no na woayi stacking context haw no afi hɔ. Hwehwɛ ɔhaw element no na yi fi trapping element no mu wɔ HTML markup no mu. Sɛ nhwɛsoɔ no, yɛbɛtumi adi tebea a ɛdi kan, “The Trapped Modal,” ho dwuma denam .modal-container a yɛbɛtu afiri header no mu na yɛde ahyɛ
element no mu n’ankasa so.Saa nsɛm yi wɔ z-index a ɛyɛ 2 na ɛda so ara renkata modal no so.Atitiriw
Nsɛm Titiriw
Modal Asɛmti
Afei, menni biribiara akyi. Me anya gyinabea pa esiane DOM nhyehyɛe foforo nti.
muSɛ wobɔ “Open Modal” button no a, modal no si biribiara anim sɛnea ɛsɛ sɛ ɛyɛ. Hwɛ Pen Scenario 1: The Trapped Modal (Ano aduru) [forked] a Shoyombo Gabriel Ayomide kyerɛwee no. Adjust The no muƆwofo Stacking Nsɛm a Ɛfa Ho Wɔ CSS Mu Na sɛ element no yɛ nea wuntumi nkɔ baabiara a worensɛe nhyehyɛe no nso ɛ? Ɛyɛ papa sɛ wobedi asɛm no ho dwuma: ɔwofo no na ɔde nsɛm a ɛfa ho no si hɔ. Hwehwɛ CSS agyapadeɛ (anaasɛ agyapadeɛ) a ɛyɛ asɛdeɛ sɛ ɛbɛkanyan nsɛm a ɛfa ho no na yi fi hɔ. Sɛ ɛwɔ atirimpɔw na wontumi nyi mfi hɔ a, ma ɔwofo no z-index bo a ɛkorɔn sen ne nua nneɛma no na ama ahina no nyinaa so. Sɛ z-index bo a ɛkorɔn a, ɔwofo ahina no kɔ soro, na ne mma no da adi sɛ wɔbɛn nea ɔde di dwuma no. Sɛ yɛgyina deɛ yɛsuaeɛ wɔ “The Submerged Dropdown” scenario no so a, yɛrentumi nyi dropdown no mfiri navbar no mu; anka ntease nnim. Nanso, yɛbɛtumi ama .navbar container no z-index boɔ akɔ soro ma ayɛ kɛseɛ asen .content element’s z-index value. .navbar { . akyi: #333; /* z-index: 1; */ z-index: 3 na ɛwɔ hɔ; gyinabea: abusuafo; } .
Saa nsakraeɛ yi nti, seesei .dropdown-menu no bɛpue wɔ nsɛm no anim a asɛm biara nni ho.
Hwɛ Pen Scenario 2: Submerged Dropdown (Ano aduru) [forked] a Shoyombo Gabriel Ayomide kyerɛwee no.
Sɔ Portals hwɛ, Sɛ Wode Framework Di Dwuma a
Wɔ frameworks te sɛ React anaa Vue mu no, Portal yɛ ade a ɛma wotumi kyerɛ ade bi a ɛwɔ n’awofo nhyehyɛe a ɛyɛ daa no akyi wɔ DOM no mu. Portals te sɛ teleportation device ma wo components. Wɔma wo kyerɛ component’s HTML wɔ baabiara wɔ krataa no mu (mpɛn pii no ɛkɔ document.body mu pɛɛ) bere a wɔma ɛkɔ so wɔ abusuabɔ a ntease wom ne ne mfitiase ɔwofo no ma props, tebea, ne nsɛm a esisi. Eyi yɛ pɛpɛɛpɛ ma guankɔbea stacking context afiri efisɛ rendered output no pue ankasa wɔ ɔhaw ɔwofo container no akyi.
ReactDOM.bɔ Portal ( .
Wei hwɛ sɛ wo dropdown content no nsie n’awofoɔ akyi, sɛ mpo ɔwofoɔ no wɔ overflow: hidden anaa z-index a ɛba fam a. Wɔ “The Clipped Tooltip” tebea a yɛadi kan hwɛɛ mu no, mede Portal bi gyee adwinnade no fii nsuo a ɛboro so no mu: clip a wɔde asie denam deɛ mede bɛto krataa no nipadua mu na mede asi trigger no atifi wɔ ade no mu. Hwɛ Pen Scenario 3: Nnwinnade a Wɔatwitwa (Ano aduru) [forked] a Shoyombo Gabriel Ayomide kyerɛwee. Stacking Context a Enni Side Effects a Wɔde Bɛba Akwan a wɔakyerɛkyerɛ mu wɔ ɔfa a atwam no nyinaa atirimpɔw ne sɛ “ɛbɛyi” nneɛma afi ɔhaw a ɛwɔ stacking contexts mu, nanso tebea horow bi wɔ hɔ a wubehia ankasa anaasɛ wobɛpɛ sɛ wobɔ stacking context. Stacking context foforo a wobɛbɔ no yɛ mmerɛw, nanso akwan no nyinaa de ɔhaw bi ba. Ɛne sɛ, gye sɛ wode isolation di dwuma: isolate. Sɛ wɔde di dwuma wɔ element bi ho a, wɔkyerɛ saa element no mma no stacking context no sɛnea ɛfa abofra biara ho ne saa context no mu, sen sɛ elements a ɛwɔ akyi benya so nkɛntɛnso. Nhwɛsoɔ a ɛyɛ tete de ne sɛ wode saa element no boɔ a ɛnyɛ papa, te sɛ z-index: -1. Fa no sɛ wowɔ .card fã bi. Wopɛ sɛ wode afɛfɛde bi a ɛte .card’s text akyi, nanso ɛwɔ card’s background no atifi ka ho. Sɛ stacking context nni card no so a, z-index: -1 de shape no kɔ root stacking context no ase (kratafa no nyinaa). Eyi ma ɛyera wɔ .card’s akyi fitaa no akyi: Hwɛ Pen Negative z-index (ɔhaw) [forked] a Shoyombo Gabriel Ayomide kyerɛwee no. Sɛnea ɛbɛyɛ na yɛadi eyi ho dwuma no, yɛpae mu ka sɛ wɔatew yɛn ho: isolate wɔ ɔwofo .card no so: Hwɛ Pen Negative z-index (ano aduru) [a wɔde fork ayɛ] a Shoyombo Gabriel Ayomide kyerɛwee no. Afei, .card element no ankasa bɛyɛ stacking context. Sɛ ne ba element — decorative shape a wɔabɔ wɔ :before pseudo-element — wɔ z-index: -1 a, ɛkɔ ɔwofo no stacking context no ase pɛɛ. Ɛtra nkyerɛwee no akyi pɛpɛɛpɛ ne card’s background no atifi, sɛnea wɔahyɛ da ayɛ no. Awiei Kae: bere foforo a ɛte sɛ nea wo z-index no ntumi nni so no, ɛyɛ trapped stacking context. Nsɛm a wɔde gyinaa so
Stacking nsɛm a ɛfa ho (MDN) . Z-index ne stacking nsɛm a ɛfa ho (web.dev) . “Sɛnea Wɔbɛyɛ Stacking Context Foforo a Isolation Property wɔ CSS mu”, Natalie Pina “Dɛn na Ɛyɛ Heck, z-index??”, Josh Comeau
Akenkan a Ɛkɔ So Wɔ SmashingMag
“CSS Z-Index a Wɔhwɛ So Wɔ Nnwuma Kɛse Mu”, Steven Frieson “Atiri a Ɛyɛ Ntama ne Nneɛma a Ɛkɔ soro Nyinaa: Nneɛma a Wɔaka abom a Ɛyɛ Anifere”, Philip Braunen “Z-Index a Wɔhwɛ So Wɔ Wɛb Dwumadi a Egyina Nneɛma So Mu”, Pavel Pomerantsev “Z-Index CSS Agyapadeɛ: Nhwɛsoɔ a ɛkɔ akyiri”, Louis Lazaris
