Naitakda mo na ba ang z-index: 99999 sa isang elemento sa iyong CSS, at hindi ito lumalabas sa itaas ng iba pang mga elemento? Ang isang halaga na malaki ay dapat madaling ilagay ang elementong iyon nang biswal sa itaas ng anumang bagay, kung ipagpalagay na ang lahat ng iba't ibang elemento ay nakatakda sa alinman sa mas mababang halaga o hindi nakatakda. Ang isang webpage ay karaniwang kinakatawan sa isang dalawang-dimensional na espasyo; gayunpaman, sa pamamagitan ng paglalapat ng mga partikular na katangian ng CSS, ang isang haka-haka na z-axis na eroplano ay ipinakilala upang ihatid ang lalim. Ang eroplanong ito ay patayo sa screen, at mula rito, nakikita ng user ang pagkakasunud-sunod ng mga elemento, isa sa ibabaw ng isa. Ang ideya sa likod ng haka-haka na z-axis, ang pananaw ng user sa mga nakasalansan na elemento, ay ang mga katangian ng CSS na lumikha nito ay nagsasama-sama upang bumuo ng tinatawag nating konteksto ng pagsasalansan. Pag-uusapan natin kung paano "nakasalansan" ang mga elemento sa isang webpage, kung ano ang kumokontrol sa pagkakasunud-sunod ng pagsasalansan, at mga praktikal na paraan upang "i-unstack" ang mga elemento kapag kinakailangan. Tungkol sa Stacking Contexts Isipin ang iyong webpage bilang isang desk. Habang nagdaragdag ka ng mga elemento ng HTML, naglalagay ka ng mga piraso ng papel, nang sunud-sunod, sa mesa. Ang huling piraso ng papel na inilagay ay katumbas ng pinakahuling idinagdag na elemento ng HTML, at ito ay nasa ibabaw ng lahat ng iba pang mga papel na inilagay sa harap nito. Ito ang normal na daloy ng dokumento, kahit para sa mga nested na elemento. Ang desk mismo ay kumakatawan sa root stacking context, na nabuo ng element, na naglalaman ng lahat ng iba pang folder. Ngayon, ang mga partikular na katangian ng CSS ay naglaro. Ang mga katangian tulad ng posisyon (na may z-index), opacity, pagbabago, at naglalaman) ay kumikilos tulad ng isang folder. Kinukuha ng folder na ito ang isang elemento at lahat ng mga anak nito, kinukuha ang mga ito mula sa pangunahing stack, at pinagpangkat-pangkat ang mga ito sa isang hiwalay na sub-stack, na lumilikha ng tinatawag nating konteksto ng stacking. Para sa mga nakaposisyong elemento, nangyayari ito kapag nagdeklara kami ng z-index na halaga maliban sa auto. Para sa mga property tulad ng opacity, transform, at filter, awtomatikong nalilikha ang konteksto ng stacking kapag inilapat ang mga partikular na value.
Subukang unawain ito: Kapag ang isang piraso ng papel (ibig sabihin, isang elemento ng bata) ay nasa loob ng isang folder (ibig sabihin, ang pagsasalansan ng konteksto ng magulang), hinding-hindi ito maaaring lumabas sa folder na iyon o mailagay sa pagitan ng mga papel sa ibang folder. Ang z-index nito ay may kaugnayan lamang sa loob ng sarili nitong folder.
Sa paglalarawan sa ibaba, ang Papel B ay nasa konteksto ng pagsasalansan ng Folder B, at maaari lamang i-order kasama ng iba pang mga papel sa folder.
Isipin, kung gagawin mo, na mayroon kang dalawang folder sa iyong desk:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
I-update natin ng kaunti ang markup. Ang Inside Folder A ay isang espesyal na page, z-index: 9999. Ang Inside Folder B ay isang plain page, z-index: 5.
.espesyal na pahina { z-index: 9999; } .plain-page { z-index: 5; }
Aling pahina ang nasa itaas? Ito ay ang .plain-page sa Folder B. Binabalewala ng browser ang mga papel ng bata at ini-stack muna ang dalawang folder. Nakikita nito ang Folder B (z-index: 2) at inilalagay ito sa ibabaw ng Folder A (z-index: 1) dahil alam nating mas malaki ang dalawa sa isa. Samantala, ang .special-page na nakatakda sa z-index: 9999 na pahina ay nasa ibaba ng stack kahit na ang z-index nito ay nakatakda sa pinakamataas na posibleng halaga. Ang mga pagsasalansan ng konteksto ay maaari ding i-nested (mga folder sa loob ng mga folder), na lumilikha ng isang "family tree." Ang parehong prinsipyo ay nalalapat: ang isang bata ay hindi kailanman makakatakas sa folder ng kanyang mga magulang. Ngayong nakuha mo na kung paano kumikilos ang mga pagsasalansan ng konteksto tulad ng mga folder na nagpapangkat-pangkat at muling nag-aayos ng mga layer, ito ay nagkakahalaga ng pagtatanong: bakit ang ilang mga katangian — tulad ng pagbabago at opacity — ay lumilikha ng mga bagong stacking na konteksto? Narito ang bagay: ang mga katangiang ito ay hindi gumagawa ng mga stacking na konteksto dahil sa hitsura ng mga ito; ginagawa nila ito dahil sa kung paano gumagana ang browser sa ilalim ng hood. Kapag nag-apply ka ng transform, opacity, filter, o perspective, sasabihin mo sa browser, "Uy, maaaring gumalaw, umikot, o magfade ang elementong ito, kaya maging handa!"
Kapag ginamit mo ang mga katangiang ito, gagawa ang browser ng bagong konteksto ng pagsasalansan upang pamahalaan ang pag-render nang mas mahusay. Nagbibigay-daan ito sa browser na pangasiwaan ang mga animation, pagbabago, at visual effect nang independyente, na binabawasan ang pangangailangang muling kalkulahin kung paano nakikipag-ugnayan ang mga elementong ito sa natitirang bahagi ng pahina. Isipin ito bilang sinasabi ng browser na, "Hahawakan ko nang hiwalay ang folder na ito para hindi ko na kailangang i-reshuffle ang buong desk sa tuwing may magbabago sa loob nito." Pero meronisang side effect. Sa sandaling iangat ng browser ang isang elemento sa sarili nitong layer, dapat nitong "i-flat" ang lahat sa loob nito, na lumikha ng bagong konteksto ng stacking. Ito ay tulad ng pagkuha ng isang folder mula sa desk upang hawakan ito nang hiwalay; lahat ng nasa loob ng folder na iyon ay napapangkat, at ang browser ngayon ay tinatrato ito bilang isang yunit kapag nagpapasya kung ano ang higit sa kung ano. Kaya't kahit na ang mga katangian ng pagbabago at opacity ay maaaring hindi mukhang nakakaapekto sa paraan ng visual na stack ng mga elemento, ginagawa nila ito, at ito ay para sa pag-optimize ng pagganap. Ang ilang iba pang mga katangian ng CSS ay maaari ding lumikha ng mga konteksto ng pagsasalansan para sa mga katulad na dahilan. Nagbibigay ang MDN ng kumpletong listahan kung gusto mong maghukay ng mas malalim. Mayroong ilang, na naglalarawan lamang kung gaano kadali ang hindi sinasadyang paglikha ng isang stacking na konteksto nang hindi nalalaman ito. Ang Problema sa "Pag-unstack". Maaaring lumitaw ang mga isyu sa pag-stack para sa maraming dahilan, ngunit ang ilan ay mas karaniwan kaysa sa iba. Ang mga bahagi ng modal ay isang klasikong pattern dahil kailangan nilang i-toggle ang bahagi upang "buksan" sa isang tuktok na layer sa itaas ng lahat ng iba pang mga elemento, pagkatapos ay alisin ito mula sa tuktok na layer kapag ito ay "sarado." Medyo tiwala ako na lahat tayo ay nakaranas ng sitwasyon kung saan nagbukas tayo ng modal at, sa anumang dahilan, hindi ito lumalabas. Hindi sa hindi ito nakabukas nang maayos, ngunit hindi ito nakikita sa mas mababang layer ng konteksto ng stacking. Nag-iiwan ito sa iyo na magtaka "paano na?" mula noong itinakda mo:
.overlay { posisyon: fixed; /* lumilikha ng konteksto ng pagsasalansan */ z-index: 1; /* inilalagay ang elemento sa isang layer sa itaas ng lahat ng iba pa */ inset: 0; lapad: 100%; taas: 100vh; overflow: nakatago; kulay ng background: #00000080; }
Mukhang tama ito, ngunit kung ang parent element na naglalaman ng modal trigger ay isang child element sa loob ng isa pang parent element na nakatakda din sa z-index: 1, na teknikal na naglalagay ng modal sa isang sublayer na natatakpan ng pangunahing folder. Tingnan natin ang partikular na senaryo na iyon at ang ilang iba pang karaniwang stacking-context pitfalls. Sa tingin ko makikita mo hindi lang kung gaano kadali ang hindi sinasadyang paglikha ng mga stacking na konteksto, kundi pati na rin kung paano maling pamamahalaan ang mga ito. Gayundin, depende sa sitwasyon kung paano ka babalik sa isang pinamamahalaang estado. Sitwasyon 1: Ang Nakulong na Modal
Makikita mo kaagad ang iyong modal na nakulong sa isang mababang antas na layer at matukoy ang magulang. Mga Extension ng Browser Ang mga matalinong developer ay gumawa ng mga extension para tumulong. Ang mga tool na tulad nitong "CSS Stacking Context Inspector" na extension ng Chrome ay nagdaragdag ng karagdagang z-index na tab sa iyong DevTools upang magpakita sa iyo ng impormasyon tungkol sa mga elementong gumagawa ng stacking na konteksto.
Mga Extension ng IDE Maaari mo ring makita ang mga isyu sa panahon ng pag-develop gamit ang isang extension na tulad nito para sa VS Code, na nagha-highlight ng mga potensyal na isyu sa konteksto ng stacking nang direkta sa iyong editor.
Pag-unstacking At Pagbawi ng Kontrol Matapos nating matukoy ang ugat, ang susunod na hakbang ay harapin ito. Mayroong ilang mga diskarte na maaari mong gawin upang matugunan ang problemang ito, at ililista ko ang mga ito sa pagkakasunud-sunod. Maaari kang pumili ng sinuman sa anumang antas, bagaman; walang sinuman ang maaaring magreklamo o makahadlang sa iba. Baguhin ang HTML Structure Ito ay itinuturing na pinakamainam na pag-aayos. Para makaharap ka sa isang stacking na isyu sa konteksto, dapat ay naglagay ka ng ilang elemento sa mga nakakatawang posisyon sa loob ng iyong HTML. Ang muling pagsasaayos ng pahina ay makakatulong sa iyong muling hubugin ang DOM at alisin ang problema sa konteksto ng pagsasalansan. Hanapin ang may problemang elemento at alisin ito mula sa elemento ng trapping sa HTML markup. Halimbawa, malulutas natin ang unang senaryo, "The Trapped Modal," sa pamamagitan ng pag-alis ng .modal-container mula sa header at paglalagay nito sa elementong
nang mag-isa.Ang nilalamang ito ay may z-index na 2 at hindi pa rin sasaklawin ang modal.Header
Pangunahing Nilalaman
Kapag na-click mo ang button na "Buksan ang Modal", ang modal ay nakaposisyon sa harap ng lahat ng iba pa gaya ng nararapat. Tingnan ang Panulat Scenario 1: Ang Nakulong na Modal (Solusyon) [na-forked] ni Shoyombo Gabriel Ayomide. Ayusin AngMagulang Stacking Konteksto Sa CSS Paano kung ang elemento ay hindi mo magagalaw nang hindi nasisira ang layout? Mas mabuting tugunan ang isyu: ang magulang ang nagtatatag ng konteksto. Hanapin ang CSS property (o property) na responsable sa pag-trigger sa konteksto at alisin ito. Kung ito ay may layunin at hindi maalis, bigyan ang magulang ng mas mataas na z-index na halaga kaysa sa mga magkakapatid na elemento nito upang iangat ang buong lalagyan. Sa mas mataas na halaga ng z-index, lilipat ang parent container sa itaas, at ang mga anak nito ay lalabas na mas malapit sa user. Batay sa kung ano ang natutunan namin sa "The Submerged Dropdown" na senaryo, hindi namin maaaring ilipat ang dropdown palabas ng navbar; hindi ito makatuwiran. Gayunpaman, maaari naming taasan ang z-index na halaga ng .navbar container upang maging mas malaki kaysa sa z-index na value ng .content element. .navbar { background: #333; /* z-index: 1; */ z-index: 3; posisyon: kamag-anak; }
Sa pagbabagong ito, lalabas na ngayon ang .dropdown-menu sa harap ng nilalaman nang walang anumang isyu.
Tingnan ang Pen Scenario 2: The Submerged Dropdown (Solusyon) [na-forked] ni Shoyombo Gabriel Ayomide.
Subukan ang Mga Portal, Kung Gumagamit ng Framework
Sa mga frameworks tulad ng React o Vue, ang Portal ay isang feature na nagbibigay-daan sa iyong mag-render ng component sa labas ng normal na hierarchy ng magulang nito sa DOM. Ang mga portal ay parang teleportation device para sa iyong mga bahagi. Hinahayaan ka nilang mag-render ng HTML ng isang bahagi saanman sa dokumento (karaniwang papunta mismo sa document.body) habang pinapanatili itong lohikal na konektado sa orihinal nitong magulang para sa mga props, estado, at mga kaganapan. Ito ay perpekto para sa pagtakas sa stacking context traps dahil literal na lumalabas ang nai-render na output sa labas ng may problemang parent container.
ReactDOM.createPortal(
Tinitiyak nito na ang iyong dropdown na content ay hindi nakatago sa likod ng magulang nito, kahit na ang magulang ay may overflow: nakatago o mas mababang z-index. Sa senaryo na "The Clipped Tooltip" na tiningnan namin kanina, gumamit ako ng Portal para iligtas ang tooltip mula sa overflow: hidden clip sa pamamagitan ng paglalagay nito sa katawan ng dokumento at pagpoposisyon nito sa itaas ng trigger sa loob ng container. Tingnan ang Pen Scenario 3: The Clipped Tooltip (Solution) [na-forked] ni Shoyombo Gabriel Ayomide. Ipinapakilala ang Stacking Context na Walang Mga Side Effect Ang lahat ng mga diskarte na ipinaliwanag sa nakaraang seksyon ay naglalayong "i-unstack" ang mga elemento mula sa may problemang mga konteksto ng stacking, ngunit may ilang mga sitwasyon kung saan kakailanganin mo o nais na lumikha ng isang stacking na konteksto. Ang paglikha ng bagong konteksto ng pagsasalansan ay madali, ngunit lahat ng mga diskarte ay may side effect. Iyon ay, maliban sa paggamit ng paghihiwalay: ihiwalay. Kapag inilapat sa isang elemento, ang pagsasalansan ng konteksto ng mga bata ng elementong iyon ay tinutukoy na nauugnay sa bawat bata at sa loob ng kontekstong iyon, sa halip na maimpluwensyahan ng mga elemento sa labas nito. Ang isang klasikong halimbawa ay ang pagtatalaga sa elementong iyon ng negatibong halaga, gaya ng z-index: -1. Isipin na mayroon kang .card component. Gusto mong magdagdag ng pandekorasyon na hugis na nasa likod ng text ng .card, ngunit sa ibabaw ng background ng card. Nang walang konteksto ng stacking sa card, ipinapadala ng z-index: -1 ang hugis sa ilalim ng konteksto ng root stacking (ang buong pahina). Ginagawa nitong mawala ito sa likod ng puting background ng .card: Tingnan ang Pen Negative z-index (problema) [na-forked] ni Shoyombo Gabriel Ayomide. Upang malutas ito, ipinapahayag namin ang paghihiwalay: ihiwalay sa parent .card: Tingnan ang Pen Negative z-index (solusyon) [na-forked] ni Shoyombo Gabriel Ayomide. Ngayon, ang .card na elemento mismo ay nagiging isang stacking context. Kapag ang child element nito — ang pandekorasyon na hugis na ginawa sa :before pseudo-element — ay may z-index: -1, napupunta ito sa pinakailalim ng konteksto ng pagsasalansan ng magulang. Tamang-tama itong nakaupo sa likod ng text at sa itaas ng background ng card, gaya ng nilayon. Konklusyon Tandaan: sa susunod na pagkakataong tila wala nang kontrol ang iyong z-index, isa itong nakulong na konteksto ng pagsasalansan. Mga sanggunian
Stacking context (MDN) Z-index at stacking na konteksto (web.dev) "Paano Gumawa ng Bagong Stacking Context gamit ang Isolation Property sa CSS", Natalie Pina "What The Heck, z-index??", Josh Comeau
Karagdagang Pagbabasa Sa SmashingMag
"Pamamahala ng CSS Z-Index Sa Malaking Proyekto", Steven Frieson "Mga Malagkit na Header At Mga Elemento ng Buong Taas: Isang Mapanlinlang na Kumbinasyon", Philip Braunen "Pamamahala ng Z-Index Sa Isang Component-Based Web Application", Pavel Pomerantsev "Ang Z-Index CSS Property: Isang Comprehensive Look", Louis Lazaris
