Nakabutang ka na ba og z-index: 99999 sa usa ka elemento sa imong CSS, ug wala kini mogawas sa ibabaw sa ubang mga elemento? Ang usa ka kantidad nga dako kinahanglan dali nga ibutang ang elemento nga makita sa ibabaw sa bisan unsang butang, kung ang tanan nga lainlaing mga elemento gibutang sa usa ka mas ubos nga kantidad o wala gitakda. Ang webpage kasagarang girepresentahan sa duha ka dimensyon nga luna; bisan pa, pinaagi sa paggamit sa piho nga mga kabtangan sa CSS, usa ka hinanduraw nga z-axis nga eroplano ang gipaila aron ipahayag ang giladmon. Kini nga eroplano tul-id sa screen, ug gikan niini, ang user nakasabut sa han-ay sa mga elemento, usa sa ibabaw sa lain. Ang ideya sa luyo sa hinanduraw nga z-axis, ang panglantaw sa user sa mga stacked nga elemento, mao nga ang CSS nga mga kabtangan nga nagmugna niini naghiusa aron maporma ang gitawag nato nga stacking context. Maghisgot kami kung giunsa ang mga elemento "gibutang" sa usa ka webpage, kung unsa ang nagkontrol sa pagkasunud-sunod sa pag-stack, ug praktikal nga mga pamaagi sa "pag-unstack" nga mga elemento kung gikinahanglan. Mahitungod sa Stacking Konteksto Hunahunaa ang imong webpage isip usa ka lamesa. Samtang nagdugang ka sa mga elemento sa HTML, nagbutang ka og mga piraso sa papel, sunod-sunod, sa lamesa. Ang kataposang piraso sa papel nga gibutang maoy katumbas sa pinakabag-o nga gidugang nga HTML nga elemento, ug kini nahimutang sa ibabaw sa tanang ubang mga papel nga gibutang sa atubangan niini. Kini ang normal nga dagan sa dokumento, bisan alang sa mga nested nga elemento. Ang lamesa mismo nagrepresentar sa konteksto sa root stacking, nga giporma sa nga elemento, nga naglangkob sa tanan nga uban pang mga folder. Karon, ang piho nga mga kabtangan sa CSS nagdula. Ang mga kabtangan sama sa posisyon (nga adunay z-index), opacity, pagbag-o, ug sulud) molihok sama sa usa ka folder. Kini nga folder nagkuha usa ka elemento ug ang tanan nga mga bata niini, gikuha kini gikan sa panguna nga stack, ug gigrupo kini sa usa ka bulag nga sub-stack, nga nagmugna sa gitawag namon nga konteksto sa stacking. Alang sa mga elemento nga nakaposisyon, mahitabo kini kung magdeklara kami og z-index nga kantidad gawas sa awto. Alang sa mga kabtangan sama sa opacity, pagbag-o, ug pagsala, ang konteksto sa stacking awtomatik nga gihimo kung ang mga piho nga kantidad gigamit.
Sulayi sabton kini: Sa higayon nga ang usa ka piraso sa papel (pananglitan, usa ka elemento sa bata) anaa sa sulod sa usa ka folder (ie, ang konteksto sa pag-stack sa ginikanan), dili gayud kini makagawas sa maong folder o ibutang sa taliwala sa mga papel sa laing folder. Ang z-index niini karon may kalabotan lamang sa sulod sa kaugalingong folder.
Sa ilustrasyon sa ubos, ang Papel B naa na sa konteksto sa pag-stack sa Folder B, ug mahimo ra ma-order sa ubang mga papel sa folder.
Hunahunaa, kung gusto nimo, nga ikaw adunay duha ka mga folder sa imong lamesa:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Atong i-update ang markup gamay. Sa sulod sa Folder A usa ka espesyal nga panid, z-index: 9999. Sa sulod sa Folder B usa ka yano nga panid, z-index: 5.
.espesyal nga panid { z-index: 9999; } .plain-panid { z-index: 5; }
Unsang panid ang naa sa ibabaw? Kini ang .plain-page sa Folder B. Gibalewala sa browser ang mga papel sa bata ug gi-stack una ang duha ka folder. Nakita niini ang Folder B (z-index: 2) ug gibutang kini sa ibabaw sa Folder A (z-index: 1) tungod kay nahibal-an nato nga ang duha mas dako kay sa usa. Samtang, ang .espesyal nga panid nga gitakda sa z-index: 9999 nga panid anaa sa ubos sa stack bisan pa nga ang z-index niini gibutang sa pinakataas nga posible nga bili. Ang pag-stack sa mga konteksto mahimo usab nga magsalag (mga folder sa sulod sa mga folder), paghimo og "family tree." Ang sama nga prinsipyo magamit: ang usa ka bata dili makaikyas sa folder sa iyang mga ginikanan. Karon nga nakuha na nimo kung giunsa ang pag-stacking sa mga konteksto sama sa mga folder nga nag-grupo ug nag-order pag-usab sa mga layer, angay nga pangutan-on: ngano nga ang pipila nga mga kabtangan - sama sa pagbag-o ug opacity - naghimo og bag-ong mga konteksto sa stacking? Ania ang butang: kini nga mga kabtangan dili makamugna og stacking nga mga konteksto tungod sa ilang hitsura; gibuhat nila kini tungod sa kung giunsa ang browser nagtrabaho sa ilawom sa hood. Kung imong gigamit ang pagbag-o, opacity, pagsala, o panan-aw, gisultihan nimo ang browser, "Uy, kini nga elemento mahimong molihok, mag-rotate, o mawala, busa pag-andam!"
Kung gigamit nimo kini nga mga kabtangan, ang browser nagmugna usa ka bag-ong konteksto sa stacking aron madumala ang paghubad nga mas episyente. Gitugotan niini ang browser nga magdumala sa mga animation, pagbag-o, ug biswal nga epekto nga independente, nga nagpakunhod sa panginahanglan sa pagkalkula pag-usab kung giunsa kini nga mga elemento nakig-uban sa nahabilin nga panid. Hunahunaa kini ingon nga ang browser nag-ingon, "Akong dumalahon kini nga folder nga gilain aron dili nako kinahanglan nga i-reshuffle ang tibuuk nga lamesa sa matag higayon nga adunay mabag-o sa sulod niini." Apan adunayusa ka side effect. Sa higayon nga ang browser mopataas sa usa ka elemento ngadto sa iyang kaugalingon nga layer, kini kinahanglan nga "pagapatag" sa tanan nga anaa sa sulod niini, paghimo og usa ka bag-ong stacking nga konteksto. Kini sama sa pagkuha sa usa ka folder gikan sa lamesa aron pagdumala niini nga gilain; ang tanan nga naa sa sulod sa kana nga folder gi-grupo, ug ang browser karon nagtratar niini ingon usa ka yunit kung magdesisyon kung unsa ang naa sa ibabaw sa kung unsa. Mao nga bisan kung ang pagbag-o ug opacity nga mga kabtangan mahimo’g dili makaapekto sa paagi sa pagtan-aw sa mga elemento nga makita, gibuhat nila, ug kini alang sa pag-optimize sa pasundayag. Daghang ubang mga kabtangan sa CSS mahimo usab nga maghimo mga konteksto sa pag-stacking alang sa parehas nga mga hinungdan. Naghatag ang MDN og kompleto nga lista kung gusto nimo nga magkalot og lawom. Adunay ubay-ubay, nga naghulagway lamang kung unsa ka sayon ang dili tinuyo nga paghimo og usa ka stacking nga konteksto nga wala mahibalo niini. Ang "Pagtangtang" nga Problema Ang mga isyu sa pag-stack mahimong motungha tungod sa daghang mga hinungdan, apan ang uban mas komon kaysa sa uban. Ang mga sangkap sa modal usa ka klasiko nga sumbanan tungod kay kinahanglan nila nga i-toggle ang sangkap aron "ablihan" sa usa ka taas nga layer labaw sa tanan nga ubang mga elemento, dayon tangtangon kini gikan sa taas nga layer kung kini "sirado." Ako medyo masaligon nga kitang tanan nakaagi sa usa ka sitwasyon diin kita nagbukas sa usa ka modal ug, sa bisan unsa nga rason, kini dili makita. Dili kini nga wala kini gibuksan sa husto, apan kini wala makita sa usa ka ubos nga layer sa konteksto sa stacking. Kini nakapahunahuna kanimo "unsaon?" sukad imong gibutang:
.overlay { posisyon: fixed; /* nagmugna sa stacking nga konteksto */ z-index: 1; /* nagbutang sa elemento sa usa ka layer labaw sa tanan */ pagsulod: 0; gilapdon: 100%; gitas-on: 100vh; nag-awas: gitago; kolor sa background: #00000080; }
Kini tan-awon nga husto, apan kung ang elemento sa ginikanan nga adunay modal trigger usa ka elemento sa bata sa sulod sa laing elemento sa ginikanan nga gitakda usab sa z-index: 1, nga teknikal nga nagbutang sa modal sa usa ka sublayer nga gitagoan sa panguna nga folder. Atong tan-awon kana nga piho nga senaryo ug usa ka pares sa uban pang sagad nga mga pitfalls sa stacking-context. Sa akong hunahuna imong makita dili lamang kung unsa kadali ang dili tinuyo nga paghimo og mga konteksto sa pag-stack, apan kung giunsa usab kini pagdumala sa sayop. Usab, kung giunsa nimo pagbalik sa usa ka gidumala nga estado nagdepende sa sitwasyon. Sitwasyon 1: Ang Natrap nga Modal
Makita dayon nimo ang imong modal nga natanggong sa ubos nga lebel nga layer ug mailhan ang ginikanan. Mga Extension sa Browser Ang mga smart developers nagtukod og mga extension aron makatabang. Ang mga himan nga sama niini nga "CSS Stacking Context Inspector" Ang extension sa Chrome makadugang ug dugang nga z-index nga tab sa imong DevTools aron ipakita kanimo ang impormasyon bahin sa mga elemento nga nagmugna og stacking nga konteksto.
Mga Extension sa IDE Mahimo nimong makita ang mga isyu sa panahon sa pag-uswag nga adunay usa ka extension nga sama niini alang sa VS Code, nga nagpasiugda sa potensyal nga mga isyu sa konteksto sa stacking direkta sa imong editor.
Pagtangtang ug Pagkuha Pag-usab sa Kontrol Human nato mahibal-an ang hinungdan nga hinungdan, ang sunod nga lakang mao ang pag-atubang niini. Adunay ubay-ubay nga mga paagi nga mahimo nimong buhaton aron masulbad kini nga problema, ug akong ilista kini sa han-ay. Makapili ka bisan kinsa sa bisan unsang lebel, bisan pa; walay makareklamo o makababag sa lain. Usba ang HTML Structure Giisip kini nga labing maayo nga pag-ayo. Aron makadagan ka sa usa ka isyu sa konteksto sa stacking, kinahanglan nimo nga gibutang ang pipila ka mga elemento sa kataw-anan nga mga posisyon sa sulod sa imong HTML. Ang pagbag-o sa panid makatabang kanimo sa pag-usab sa DOM ug pagwagtang sa problema sa konteksto sa stacking. Pangitaa ang problema nga elemento ug kuhaa kini gikan sa elemento sa pagkupot sa HTML markup. Pananglitan, masulbad nato ang unang senaryo, “The Trapped Modal,” pinaagi sa pagbalhin sa .modal-container gikan sa header ug pagbutang niini sa
element nga mag-inusara.Kini nga sulod adunay z-index nga 2 ug dili gihapon motabon sa modal.Ulohan
Panguna nga Kontento
Kung imong i-klik ang "Open Modal" nga buton, ang modal gipahimutang sa atubangan sa tanan nga butang ingon nga kini kinahanglan. Tan-awa ang Pen Scenario 1: The Trapped Modal (Solution) [gisawang] ni Shoyombo Gabriel Ayomide. I-adjust AngGinikanan Stacking Konteksto Sa CSS Unsa kaha kung ang elemento usa nga dili ka makalihok nga dili maguba ang layout? Mas maayo nga sulbaron ang isyu: ang ginikanan nagtukod sa konteksto. Pangitaa ang CSS property (o properties) nga responsable sa pag-trigger sa konteksto ug kuhaa kini. Kung kini adunay katuyoan ug dili matangtang, hatagi ang ginikanan og mas taas nga z-index nga kantidad kaysa sa mga elemento sa igsoon niini aron maalsa ang tibuuk nga sudlanan. Uban sa mas taas nga z-index nga bili, ang ginikanan nga sudlanan mobalhin sa ibabaw, ug ang mga anak niini makita nga mas duol sa tiggamit. Base sa among nakat-unan sa "The Submerged Dropdown" scenario, dili namo mabalhin ang dropdown gikan sa navbar; dili kini makatarunganon. Apan, mahimo natong dugangan ang z-index nga bili sa .navbar nga sudlanan nga mas dako pa kay sa z-index nga kantidad sa .content nga elemento. .navbar { background: #333; /* z-index: 1; */ z-index: 3; posisyon: paryente; }
Uban niini nga pagbag-o, ang .dropdown-menu karon makita sa atubangan sa sulod nga walay bisan unsa nga isyu.
Tan-awa ang Pen Scenario 2: The Submerged Dropdown (Solution) [gisawang] ni Shoyombo Gabriel Ayomide.
Sulayi ang mga Portal, Kung Naggamit Usa ka Framework
Sa mga gambalay sama sa React o Vue, ang usa ka Portal usa ka bahin nga nagtugot kanimo sa pag-render sa usa ka sangkap gawas sa normal nga hierarchy sa ginikanan niini sa DOM. Ang mga portal sama sa usa ka aparato sa teleportasyon alang sa imong mga sangkap. Gitugotan ka nila sa pag-render sa HTML sa usa ka component bisan asa sa dokumento (kasagaran diha mismo sa document.body) samtang gihuptan kini nga lohikal nga konektado sa orihinal nga ginikanan niini alang sa mga props, estado, ug mga panghitabo. Perpekto kini alang sa pag-ikyas sa mga lit-ag sa konteksto tungod kay ang gihatag nga output literal nga makita sa gawas sa sulud nga sulud sa ginikanan.
ReactDOM.createPortal(
Kini nagsiguro nga ang imong dropdown content dili matago sa luyo sa ginikanan niini, bisan kung ang ginikanan nag-awas: gitago o ubos nga z-index. Sa senaryo nga "The Clipped Tooltip" nga among gitan-aw sa sayo pa, migamit ko og Portal aron i-rescue ang tooltip gikan sa pag-awas: tinago nga clip pinaagi sa pagbutang niini sa lawas sa dokumento ug ibutang kini sa ibabaw sa gatilyo sulod sa sudlanan. Tan-awa ang Pen Scenario 3: The Clipped Tooltip (Solution) [gisawang] ni Shoyombo Gabriel Ayomide. Pagpaila sa Stacking Konteksto nga Walay Side Effects Ang tanan nga mga pamaagi nga gipatin-aw sa miaging seksyon gitumong sa "pag-unstacking" nga mga elemento gikan sa mga problema nga stacking nga konteksto, apan adunay pipila ka mga sitwasyon diin kinahanglan nimo o gusto nga maghimo usa ka konteksto sa stacking. Ang paghimo og bag-ong konteksto sa pag-stack sayon, apan ang tanan nga mga pamaagi adunay usa ka side effect. Kana mao, gawas sa paggamit sa isolation: isolate. Kung i-apply sa usa ka elemento, ang konteksto sa stacking sa mga bata sa elemento gitino nga may kalabotan sa matag bata ug sa sulod sa konteksto, kaysa maimpluwensyahan sa mga elemento sa gawas niini. Ang usa ka klasiko nga pananglitan mao ang pagbutang sa kana nga elemento nga negatibo nga kantidad, sama sa z-index: -1. Hunahunaa nga ikaw adunay .card component. Gusto nimong idugang ang usa ka pangdekorasyon nga porma nga naglingkod sa luyo sa teksto sa .card, apan sa ibabaw sa background sa kard. Kung walay stacking nga konteksto sa card, ang z-index: -1 nagpadala sa porma ngadto sa ubos sa root stacking nga konteksto (ang tibuok panid). Kini makapawala niini luyo sa puti nga background sa .card: Tan-awa ang Pen Negative z-index (problema) [gisawang] ni Shoyombo Gabriel Ayomide. Aron masulbad kini, among gideklarar nga isolation: isolate sa ginikanan .card: Tan-awa ang Pen Negatibo nga z-index (solusyon) [gisawang] ni Shoyombo Gabriel Ayomide. Karon, ang .card nga elemento mismo nahimong usa ka stacking nga konteksto. Kung ang bata nga elemento niini - ang pangdekorasyon nga porma nga gihimo sa: sa wala pa ang pseudo-element - adunay z-index: -1, kini moadto sa labing ubos sa konteksto sa pag-stack sa ginikanan. Naglingkod kini nga hingpit sa luyo sa teksto ug sa ibabaw sa background sa kard, ingon sa gituyo. Panapos Hinumdomi: sa sunod higayon nga ang imong z-index morag dili na makontrol, kini usa ka natanggong nga konteksto sa stacking. Mga pakisayran
Pag-stacking nga konteksto (MDN) Z-index ug stacking nga konteksto (web.dev) "Giunsa Paghimo usa ka Bag-ong Konteksto sa Stacking nga adunay Pag-inusara nga Property sa CSS", Natalie Pina "Unsa Ang Heck, z-index??", Josh Comeau
Dugang nga Pagbasa Sa SmashingMag
"Pagdumala sa CSS Z-Index Sa Daghang Proyekto", Steven Frieson "Sticky Header Ug Full-Height Elements: Usa ka Tricky Combination", Philip Braunen "Pagdumala sa Z-Index Sa Usa ka Component-Based Web Application", Pavel Pomerantsev "Ang Z-Index CSS Property: Usa ka Comprehensive Look", Louis Lazaris
