Na e setiina le z-index: 99999 i luga o se elemene i lau CSS, ma e le sau i luga o isi elemene? O se tau e lapopoa e tatau ona faigofie ona tuu le elemene i le vaai i luga o se isi mea, ma le manatu o elemene eseese uma e seti i se tau maualalo pe leai foi. O se itulau webpage e masani ona faʻatusalia i se avanoa e lua; ae ui i lea, e ala i le faʻaogaina o meatotino CSS faʻapitoa, o se vaʻa vaʻaia z-axis ua faʻafeiloaʻi e faʻaalia le loloto. O lenei vaalele e faʻatatau i le lau, ma mai ai, e iloa ai e le tagata faʻaoga le faasologa o elemene, tasi i luga o le isi. O le manatu i tua o le z-axis, le manatu o le tagata faʻaoga i elemene faʻapipiʻi, o le CSS meatotino e faʻatupuina e tuʻufaʻatasia e fausia ai le mea tatou te taʻua o le faʻapipiʻiina o mea. O le a matou talanoa pe faʻafefea ona "faʻapipiʻi" elemene i luga o se itulau webpage, o le a le mea e pulea ai le faʻatonuga o le faʻapipiʻi, ma auala faʻaoga e "talatala" elemene pe a manaʻomia. E uiga i le Fa'aputuina o Tulaga Vaai faalemafaufau o lau itulau web o se kesi. A'o e fa'aopoopoina elemene HTML, o lo'o e tu'uina fasipepa, tasi ma le isi, i luga o le kesi. O le fasipepa mulimuli na tu'uina e tutusa ma le elemene HTML aupito lata mai, ma o lo'o nofo i luga o isi pepa uma o lo'o tu'uina i luma. O le fa'asologa masani lea o pepa, e o'o lava i elemene fa'apipi'i. O le kesi lava ia o lo'o fa'atusalia ai le fa'aputuga o a'a, na faia e le elemene, lea o lo'o i ai isi faila uma. Ole taimi nei, o mea totino CSS fa'apitoa e amata mai. O mea totino e pei o le tulaga (faatasi ai ma le z-index), opacity, suiga, ma aofia ai) galue e pei o se faila. O lenei pusa e ave se elemene ma ana fanau uma, aveese mai i latou mai le faaputuga autu, ma faavasega i latou i se vaega laiti, ma fatuina ai le mea tatou te ta'ua o le fa'aputuga. Mo elemene faʻatulagaina, e tupu lenei mea pe a matou faʻaalia se tau-z-index e ese mai i le taʻavale. Mo meatotino e pei o le opacity, transform, ma le faamama, o le fa'aputuga fa'aputu e fa'atupu otometi pe a fa'aoga tulaga fa'apitoa.
Taumafai e malamalama i le mea lenei: A iai loa se fasipepa (e pei o se tamaititi elemene) i totonu o se pusa (faʻataʻitaʻiga, faʻapipiʻi faʻasologa o matua), e le mafai ona alu ese mai lena pusa pe tuʻu i le va o pepa i se isi faila. O lona z-index ua na'o le talafeagai i totonu o lana lava faila.
I le fa'ata'ita'iga o lo'o i lalo, o le Pepa B o lo'o i totonu o le fa'aputuga o le Folder B, ma e mafai ona fa'atonu fa'atasi ma isi pepa i totonu o le pusa.
Va'ai faalemafaufau, afai e te mana'o ai, e lua lau laupepa i luga o lau kesi:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Sei o tatou faafou teisi le faailoga. I totonu o le Folder A o se itulau faapitoa, z-index: 9999. I totonu o le Folder B o se itulau manino, z-index: 5.
.itulau-faapitoa { z-index: 9999; } .itulau manino { z-index: 5; }
O le fea itulau o lo'o i luga? O le .plain-page i le Folder B. E le amana'ia e le su'esu'e pepa a tamaiti ae fa'aputu muamua faila e lua. E va'aia le Folder B (z-index: 2) ma tu'u i luga o le Folder A (z-index: 1) aua ua tatou iloa e sili atu le lua i le tasi. I le taimi nei, o le .special-itulau ua seti i le z-index: 9999 itulau o loʻo i le pito i lalo o le faaputuga e ui lava o lona z-index ua faʻatulagaina i le maualuga maualuga. E mafai fo'i ona tu'u fa'aputuga o fa'aputuga (fa'amau i totonu o fa'ailoga), fa'atupuina ai se “fa'auaiga.” O le mataupu faavae lava lea e tasi: e le mafai ona sola ese se tamaitiiti i le faila a ona matua. O lea la ua e maua pe fa'afefea ona fa'atupu fa'aputuga fa'aputuga pei o faila e fa'aputu ma toe fa'atonu fa'apapa, e aoga le fesili: aisea e fa'atupu ai ni mea fa'apitoa - pei o le suiga ma le gaogao - fa'atupu ni fa'aputuga fou? O le mea lenei: o nei meatotino e le fa'atupuina fa'aputugā fa'asologa ona o foliga; latou te faia ona o le auala e galue ai le browser i lalo o le pulou. A e faʻaogaina le suiga, opacity, faamama, poʻo se vaʻaiga, o loʻo e taʻu atu i le masini suʻesuʻe, "Ei, o lenei elemene e ono gaoioi, sui, pe mou atu, o lea ia saunia!"
A e fa'aogaina nei meatotino, e fa'atupu e le su'esu'e se tala fa'aputu fou e fa'atonutonu lelei ai le fa'aliliuga. Ole mea lea e mafai ai e le su'esu'e ona taulimaina fa'afiafiaga, suiga, ma fa'aaliga va'aia tuto'atasi, fa'aitiitia le mana'oga e toe fa'atatau pe fa'afefea ona fegalegaleai nei elemene ma isi vaega o le itulau. Mafaufau i ai e pei o le browser e fai mai, "O le a ou taulimaina ese lenei pusa ina ia ou le toe suia le kesi atoa i taimi uma e suia ai se mea i totonu." Ae e iaiose aafiaga itu. O le taimi lava e sii ai e le browser se elemene i lona lava laulau, e tatau ona "faʻamafola" mea uma i totonu, fatuina se tala fou faʻapipiʻi. E pei o le aveeseina o se faila mai le kesi e tago ese ai; o mea uma i totonu o lena pusa e faʻapotopotoina, ma o loʻo faʻaogaina e le browser o se iunite e tasi pe a filifili pe o le a le mea e sili atu. E ui lava la o le suiga ma le opacity meatotino atonu e foliga mai e le afaina ai le auala e faʻapipiʻi ai elemene i le vaʻaia, latou te faia, ma e mo le faʻatinoina o faʻatinoga. Ole tele o isi mea totino CSS e mafai fo'i ona fa'atupu fa'aputugā fa'asologa mo mafua'aga tutusa. MDN e maua ai se lisi atoa pe a e mana'o e eli loloto. E to'aitiiti, e na'o le fa'aalia o le faigofie tele o le fa'atupuina o se fa'aputugā tala e aunoa ma le iloaina. Le Faʻafitauli "Tatalaina". O faʻafitauli faʻapipiʻi e mafai ona tulaʻi mai mo le tele o mafuaʻaga, ae o nisi e sili atu ona taatele nai lo isi. O vaega faʻapitoa o se mamanu masani aua latou te manaʻomia le tosoina o le vaega e "tatala" i luga o le pito i luga o isi elemene uma, ona aveese lea mai le pito i luga pe a "tapuni." Ou te matua mautinoa lava o tatou uma ua taufetuli i se tulaga tatou te tatalaina ai se auala ma, po o le a lava le mafuaaga, e le o aliali mai. E le faapea ua le tatalaina lelei, ae ua le o vaaia i se vaega pito i lalo o le tulaga faaputu. O lenei mea e te mafaufau ai "faʻafefea?" talu ona e setiina:
.overlay { tulaga: tumau; /* fa'atupuina le fa'aputuga fa'aputuga */ z-faasinoupu: 1; /* tu'u le elemene i luga o se laulau i luga a'e o isi mea uma */ fa'aofi: 0; lautele: 100%; maualuga: 100vh; taumasuasua: natia; lanu i tua: #00000080; }
E foliga sa'o lenei mea, ae afai o le elemene matua o loʻo i ai le faʻaosoina o se tamaititi elemene i totonu o se isi matua elemene o loʻo seti foi i le z-index: 1, o loʻo tuʻuina faʻapitoa le modal i totonu o se sublayer ua punitia e le faila autu. Seʻi o tatou vaʻavaʻai i lena faʻataʻitaʻiga faʻapitoa ma nisi o isi faʻalavelave faʻapipiʻi masani. Ou te manatu o le a e vaʻaia e le gata i le faigofie o le fatuina ma le le iloa o faʻaputuga faʻapipiʻi, ae faʻapea foʻi ma le faʻaogaina sese. E le gata i lea, o le auala e te toe foi ai i se setete pulea e faalagolago i le tulaga. Fa'aaliga 1: Le Fa'ata'ita'iga ua Mailei
E mafai ona e va'ai vave i lau auala o lo'o pu'eina i se tulaga maualalo ma fa'ailoa le matua. Su'ega Su'esu'e Ua fausia e le au atina'e atamai ni fa'aopoopoga e fesoasoani ai. Meafaigaluega e pei o lenei "CSS Stacking Context Inspector" Chrome faʻaopoopoga faʻaopoopoina le z-index tab i lau DevTools e faʻaali atu ia te oe faʻamatalaga e uiga i elemene e fatuina ai se faʻapipiʻi faʻasologa.
IDE Fa'aopoopoga E mafai foʻi ona e vaʻaia faʻafitauli i le taimi o atinaʻe ma se faʻaopoopoga e pei o lenei mo le VS Code, lea e faʻamaonia ai faʻafitauli faʻapipiʻi faʻapipiʻi saʻo i lau faatonu.
Tatalaina ma toe maua le Pulea A uma ona matou iloa le mafuaaga autu, o le isi laasaga o le taulimaina lea. E tele auala e mafai ona e faia e foia ai lenei faafitauli, ma o le a ou lisiina i latou i le faasologa. E mafai ona e filifilia soʻo se tasi i soʻo se tulaga, e ui lava; e leai se tasi e mafai ona faitio pe faalavelave i le isi. Suia le Fauga HTML O lenei mea e manatu o le faʻaleleia sili ona lelei. Mo oe e alu i se faʻasologa o mataupu faʻapipiʻi, e tatau ona e tuʻuina ni elemene i tulaga malie i totonu o lau HTML. Toe fa'atulagaina o le itulau o le a fesoasoani ia te oe e toe fa'aleleia le DOM ma fa'ate'aina le fa'afitauli fa'aputuga. Su'e le fa'afitauli fa'afitauli ma aveese mai le elemene maile i le fa'ailoga HTML. Mo se faʻataʻitaʻiga, e mafai ona tatou foia le faʻaaliga muamua, "The Trapped Modal," e ala i le faʻanofoina o le .modal-container mai le ulutala ma tuʻu i totonu o le
element na o ia.O lenei anotusi e iai le z-index o le 2 ma o le a le mafai lava ona aofia ai le auala. Ulutala
Anotusi Autu
A e kiliki le "Open Modal" faʻamau, o loʻo faʻatulagaina le modal i luma o isi mea uma e pei ona tatau ai. Vaʻai i le Peni Faʻaaliga 1: O le Trapped Modal (Fuli) [forked] e Shoyombo Gabriel Ayomide. Fetuuna'i LeMatua Stacking Context I CSS Ae faʻapefea pe a fai o le elemene o se tasi e le mafai ona e gaoioi e aunoa ma le solia o le faʻatulagaga? E sili atu le faʻatalanoaina o le mataupu: e faʻavae e matua le faʻamatalaga. Su'e le meatotino CSS (po'o meatotino) e nafa ma le fa'aosoina o le tala ma aveese. Afai ei ai se fa'amoemoega ma e le mafai ona aveese, tu'u i le matua se fa'ailoga e maualuga atu le z-index nai lo ona tei elemene e si'i uma ai le atigipusa. Fa'atasi ai ma le maualuga o le fa'asologa o le z-index, o le atigipusa matua e alu i le pito i luga, ma o lana fanau e foliga latalata i le tagata fa'aoga. Faʻavae i luga o mea na matou aʻoaʻoina i le "The Submerged Dropdown" scenario, e le mafai ona matou faʻagasolo le pa'ū i fafo mai le navbar; e le talafeagai. Ae ui i lea, e mafai ona tatou faʻateleina le taua o le z-index o le .navbar container e sili atu nai lo le .content element z-index value. .navbar { talaaga: #333; /* z-index: 1; */ z-faasinoupu: 3; tulaga: aiga; }
Faatasi ai ma lenei suiga, ua aliali mai nei le .dropdown-menu i luma o le anotusi e aunoa ma se faʻafitauli.
Vaʻai i le Peni Faʻaaliga 2: O le Faʻalaloina Faʻalalo (Fuli) [faʻatau] e Shoyombo Gabriel Ayomide.
Fa'ata'ita'i Portals, pe a fa'aaogaina se Fa'avaa
I auivi e pei o le React po'o le Vue, o le Portal o se vaega e mafai ai ona e tu'uina atu se vaega i fafo atu o lona fa'atonuga masani matua ile DOM. Portals e pei o se masini feaveaʻi mo au vaega. Latou te faʻatagaina oe e tuʻuina atu le HTML o se vaega i soʻo se mea i totonu o le pepa (e masani lava i totonu o le document.body) aʻo faʻapipiʻi saʻo i lona matua muamua mo mea, setete, ma mea tutupu. E fetaui lelei lea mo le sola ese mai le fa'aputuina o mailei tala'i talu ai o le fa'aliliuga o lo'o fa'aalia i fafo atu o le atigipusa matua fa'afitauli.
ReactDOM.createPortal(
Ole mea lea e fa'amautinoa ai e le o natia lau mea e pa'u i lalo i tua o lona matua, tusa lava pe ova le matua: natia po'o se fa'ailoga z-maualalo. I le ata "The Clipped Tooltip" na matou vaʻai i ai muamua, na ou faʻaogaina se Portal e laveaʻi ai le meafaigaluega mai le tafe: kilipa natia e ala i le tuʻuina i totonu o le tino o le pepa ma tuʻu i luga aʻe o le faʻaoso i totonu o le koneteina. Va'ai le Peni Fa'aaliga 3: O le Tipi Meafaigaluega (Fuli) [tu'u] saunia e Shoyombo Gabriel Ayomide. Fa'ailoaina Tulaga Fa'aputu'e E aunoa ma A'afiaga O auala uma o loʻo faʻamatalaina i le vaega muamua e faʻatatau i le "tatala" elemene mai faʻafitauli faʻapipiʻi faʻalavelave, ae o loʻo i ai nisi tulaga e te manaʻomia moni ai pe manaʻo e fatuina se faʻapipiʻi faʻasologa. O le fa'atupuina o se fa'aputuga fou e faigofie, ae o auala uma e o'o mai ma se a'afiaga. O lona uiga, se'i vagana le fa'aogaina o le tu'ufua: fa'a'ese'ese. A fa'atatau i se elemene, o le fa'aputuga o le fa'aputuga o tamaiti o lena elemene e fa'atatau i tamaiti ta'itasi ma totonu o lena fa'amatalaga, nai lo le fa'aaafiaina e elemene i fafo atu. O se faʻataʻitaʻiga masani o le tuʻuina atu o lena elemene se tau le lelei, e pei o le z-index: -1. Vaai faalemafaufau e iai sau vaega .card. E te mana'o e fa'aopoopo se foliga teuteu o lo'o nofo i tua o le .card's text, ae i luga o le pito i tua o le kata. A aunoa ma se fa'aputuga fa'aputu i luga o le kata, z-index: -1 e tu'uina atu le foliga i le pito i lalo o le fa'aputuga o a'a (le itulau atoa). O le mea lea e mou atu ai i tua o le papa'e papa'e o le .card: Vaʻai i le Pen Negative z-index (faʻafitauli) [tuu] saunia e Shoyombo Gabriel Ayomide. Ina ia foia lenei mea, matou te tautino atu le faaesea: faaesea i le matua .card: Va'ai le Pen Negative z-index (fofo) [fa'atau] saunia e Shoyombo Gabriel Ayomide. Lenei, o le .card elemene lava ia avea ma fa'aputuga tala. A'o lana tama elemene - le foliga teuteu na faia i luga o le:before pseudo-element - e iai le z-index: -1, e alu i le pito i lalo ole fa'aputuga a matua. E nofo lelei i tua o tusitusiga ma luga o le talaaga o le kata, e pei ona fuafuaina. Fa'ai'uga Manatua: o le isi taimi e foliga mai e le mafai ona pulea lau z-index, o se faʻasologa faʻapipiʻi maileia. Fa'asinomaga
Tu'u fa'aputuga (MDN) Z-index ma le fa'aputuina o fa'amatalaga (web.dev) "Faʻafefea ona Fausia se Faʻamatalaga Faʻapipiʻi Fou ma le Meatotino Tuʻuese i CSS", Natalie Pina "O le a le Heck, z-index??", Josh Comeau
Faitau atili ile SmashingMag
"Faʻafoeina o le CSS Z-Index I Galuega Tele", Steven Frieson "Ulu Fa'amau ma Elemene Atoa: O se Tu'ufa'atasi Faigata", Philip Braunen "Faʻafoeina o le Z-Index I totonu o se Faʻasalalauga Faʻasalalau Faʻavae", Pavel Pomerantsev "O le Z-Index CSS Meatotino: O se Va'aiga Atoa", Louis Lazaris
