Efa nametraka z-index: 99999 amin'ny singa iray ao amin'ny CSS-nao ve ianao, ary tsy mivoaka eo ambonin'ny singa hafa? Ny sanda lehibe dia tokony hametraka mora foana io singa io eo ambonin'ny zavatra hafa rehetra, raha heverina fa ny singa samihafa rehetra dia napetraka amin'ny sanda ambany kokoa na tsy napetraka mihitsy. Ny pejin-tranonkala dia matetika aseho amin'ny habaka roa; Na izany aza, amin'ny fampiharana ny toetra CSS manokana, dia ampidirina ny fiaramanidina z-axis an-tsaina mba hampita ny halaliny. Io fiaramanidina io dia perpendicular amin'ny efijery, ary avy amin'izany no ahafantaran'ny mpampiasa ny filaharan'ireo singa, ny iray eo ambonin'ny iray. Ny hevitra ao ambadiky ny z-axis an-tsaina, ny fahitan'ny mpampiasa ny singa mitongilana, dia ny fananana CSS mamorona azy dia mitambatra mba hamorona ilay antsoina hoe contexte stacking. Hiresaka momba ny fomba "manangona" singa ao amin'ny pejin-tranonkala isika, izay mifehy ny filaharan'ny stacking, ary ny fomba azo ampiharina amin'ny "hamongotra" ireo singa rehefa ilaina izany. Momba ny Stacking Contexts Alaivo sary an-tsaina hoe birao ny pejinao. Rehefa manampy singa HTML ianao dia mametraka tapa-taratasy, tsirairay avy, eo amin'ny latabatra. Ny tapa-taratasy farany napetraka dia mitovy amin'ny singa HTML nampidirina vao haingana, ary mipetraka eo ambonin'ireo taratasy hafa rehetra napetraka eo anoloany. Ity no fikorianan'ny antontan-taratasy mahazatra, na dia ho an'ny singa misy akany aza. Ny birao mihitsy dia maneho ny contexte stacking root, noforonin'ny singa , izay misy lahatahiry hafa rehetra. Ankehitriny, ny fananana CSS manokana dia miditra an-tsehatra. Ny fananana toy ny toerana (miaraka amin'ny z-index), opacity, transform, ary misy) dia miasa toy ny lahatahiry. Ity lahatahiry ity dia maka singa iray sy ny zanany rehetra, manaisotra azy ireo avy ao amin'ny stack lehibe, ary manambatra azy ireo ho zana-tsipìka misaraka, mamorona ilay antsoinay hoe contexte stacking. Ho an'ny singa misy toerana dia mitranga izany rehefa manambara sanda z-index ankoatry ny auto. Ho an'ny fananana toy ny opacity, transform, ary sivana, ny contexte stacking dia noforonina ho azy rehefa misy soatoavina manokana ampiharina.
Andramo ny hahatakatra izao: Raha vantany vao misy taratasy (izany hoe singa ankizy) ao anaty lahatahiry iray (izany hoe, ny tontolon'ny famahanan'ny ray aman-dreny), dia tsy afaka miala amin'io lahatahiry io na apetraka eo anelanelan'ny taratasy ao anaty lahatahiry hafa. Ny z-index dia tsy misy afa-tsy ao anatin'ny lahatahiry manokana.
Ao amin'ny sary etsy ambany, ny taratasy B dia ao anatin'ny tontolon'ny lahatahiry B, ary tsy azo alaina miaraka amin'ny taratasy hafa ao amin'ny lahatahiry ihany.
Alaivo sary an-tsaina, raha tianao, fa manana lahatahiry roa eo amin'ny biraonao ianao:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Andao hanavao kely ny marika. Ao anatin'ny lahatahiry A dia pejy manokana, z-index: 9999. Ao anatin'ny Folder B dia pejy tsotra, z-index: 5.
.pejy manokana { z-index: 9999; } .pejy tsotra { z-index: 5; }
Pejy iza no ambony? Izy io no .pejy tsotra ao amin'ny lahatahiry B. Ny navigateur dia tsy miraharaha ny taratasin'ny ankizy ary mametraka ny lahatahiry roa voalohany. Hitany ny lahatahiry B (fanondro-z: 2) ary apetrany eo ambonin'ny lahatahiry A (fanondro-z: 1) satria fantatsika fa lehibe ny roa noho ny iray. Mandritra izany fotoana izany, ny pejy .special-pejy napetraka amin'ny z-index: 9999 pejy dia eo amin'ny farany ambany amin'ny stack na dia ny z-index aza dia napetraka amin'ny sanda ambony indrindra. Ny contexte stacking dia azo apetraka ihany koa (folder ao anatin'ny lahatahiry), mamorona “family tree”. Mihatra io fitsipika io: tsy afaka mandositra ny lahatahirin'ny ray aman-dreniny mihitsy ny ankizy iray. Rehefa azonao izao ny fihetsiky ny contexte stacking ho toy ny lahatahiry izay mivondrona sy mamerina manara-maso ny sosona, dia ilaina ny manontany hoe: nahoana ny fananana sasany - toy ny fiovan'ny toetr'andro sy ny opacity - no mamorona toe-javatra mitambatra vaovao? Ity ny zavatra: tsy mamorona contexte stacking ireo fananana ireo noho ny fijery azy; manao izany izy ireo noho ny fomba fiasan'ny navigateur eo ambanin'ny saron-tava. Rehefa mampihatra ny fanovana ianao, ny opacity, ny sivana, na ny fomba fijery, dia miteny amin'ny navigateur ianao hoe: "Eh, mety hivezivezy, hihodina, na hanjavona ity singa ity, koa miomàna!"
Rehefa mampiasa ireo toetra ireo ianao, dia mamorona contexte stacking vaovao ny navigateur mba hitantana ny famandrihana amin'ny fomba mahomby kokoa. Izany dia ahafahan'ny navigateur mitantana ny sary mihetsika, ny fanovana ary ny fiantraikany amin'ny maso tsy miankina, mampihena ny filana mamerina ny fomba ifandraisan'ireo singa ireo amin'ny sisa amin'ny pejy. Eritrereto ho toy ny filazan'ny navigateur hoe: "Hikarakara an'ity lahatahiry ity aho mba tsy ho voatery hanova ny birao manontolo isaky ny misy zavatra ao anatiny miova." Fa misyeffet secondaire. Raha vantany vao manainga singa iray ao anaty sosona manokana ny navigateur, dia tsy maintsy "manalefaka" ny zava-drehetra ao anatiny, mamorona contexte stacking vaovao. Toy ny manala lahatahiry iray eo amin'ny birao mba hikarakarana azy mitokana; mivondrona daholo ny ao anatin'io lahatahiry io, ary raisin'ny navigateur ho toy ny singa tokana izy io rehefa manapa-kevitra hoe inona no ambony indrindra. Ka na dia mety tsy hisy fiantraikany amin'ny fomba ametrahan'ny singa hita maso aza ny toetran'ny fiovana sy ny opacity, dia ataony izany, ary natao ho an'ny fanatsarana ny fampisehoana izany. Ny fananana CSS maro hafa dia afaka mamorona contexte stacking noho ny antony mitovy. Manome lisitra feno ny MDN raha te-handalina lalindalina kokoa ianao. Misy vitsivitsy, izay mampiseho fotsiny ny maha-mora ny mamorona tsy nahy mamorona contexte stacking nefa tsy mahafantatra izany. Ny olan'ny "famoahana". Ny olana momba ny stacking dia mety hipoitra noho ny antony maro, fa ny sasany dia mahazatra kokoa noho ny hafa. Ny singa maodely dia lamina mahazatra satria mitaky fanodinkodinana ilay singa mba "hisokatra" amin'ny sosona ambony ambonin'ny singa hafa rehetra, avy eo esorina amin'ny sosona ambony rehefa "nakatona". Tena matoky aho fa isika rehetra dia niharan'ny toe-javatra iray izay nanokatra modal ary, na inona na inona antony, dia tsy miseho izany. Tsy hoe tsy nisokatra araka ny tokony ho izy izany, fa tsy hita ao amin'ny sosona ambany amin'ny contexte stacking. Izany dia mamela anao hanontany tena hoe "ahoana no tonga?" hatramin'ny nametrahanao:
.overlay { toerana: raikitra; /* mamorona contexte stacking */ z-fanondro: 1; /* mametraka ny singa eo amin'ny sosona ambonin'ny zavatra hafa rehetra */ ampidiro: 0; sakany: 100%; haavony: 100vh; tondraka: miafina; loko-fototra: #00000080; }
Toa marina izany, fa raha singa manan-janaka ao anatin'ny singa ray aman-dreny hafa ny singa ray aman-dreny misy ny trigger modèle izay napetraka amin'ny z-index: 1, dia mametraka ara-teknika ny modal amin'ny sublayer voasaron'ny lahatahiry lehibe. Andeha hojerentsika io scenario manokana io sy ireo fandrika hafa mahazatra stacking-context. Heveriko fa ho hitanao fa tsy hoe mora ny mamorona tsy nahy mamorona contexte stacking, fa koa ny fomba fitantanana azy ireo. Ankoatra izany, miankina amin'ny toe-javatra ny fomba hiverenanao amin'ny fanjakana tantanana. Scenario 1: Ny fomba voafandrika
Azonao atao ny mahita avy hatrany ny modalo voafandrika ao anaty sosona ambany ary fantaro ny ray aman-dreny. Fanitarana navigateur Nanangana fanitarana hanampiana ireo mpamorona mahay. Ny fitaovana toa an'ity "CSS Stacking Context Inspector" Chrome fanitarana dia manampy tabilao z-index fanampiny amin'ny DevTools anao mba hampisehoana aminao ny fampahalalana momba ireo singa mamorona contexte stacking.
Fanitarana IDE Azonao atao mihitsy aza ny mahita olana mandritra ny fampandrosoana miaraka amin'ny fanitarana toa an'ity iray ity ho an'ny VS Code, izay manasongadina ny olana mety hitranga mivantana amin'ny tonian-dahatsoratra.
Fanaraha-maso sy famerenana indray Aorian'ny fahafantarantsika ny fototry ny antony, ny dingana manaraka dia ny miatrika izany. Misy fomba maro azonao atao mba hamahana ity olana ity, ary hotanisaiko araka ny filaharany. Afaka misafidy na iza na iza amin'ny ambaratonga rehetra ianao, na izany aza; tsy misy afaka mitaraina na manakana ny hafa. Hanova ny rafitra HTML Izany dia heverina ho vahaolana tsara indrindra. Raha te hiditra amin'ny olana momba ny contexte ianao dia tsy maintsy nametraka singa sasany amin'ny toerana mahatsikaiky ao anatin'ny HTML-nao. Ny fanavaozana ny pejy dia hanampy anao hanamboatra ny DOM ary hanafoana ny olana momba ny tontolon'ny stacking. Tadiavo ny singa misy olana ary esory amin'ny singa fandrika ao amin'ny marika HTML. Ohatra, azontsika atao ny mamaha ny scenario voalohany, "The Trapped Modal," amin'ny alàlan'ny fanesorana ny .modal-container avy amin'ny lohapejy ary mametraka azy amin'ny singa
irery.Ity atiny ity dia manana tondro-z amin'ny 2 ary mbola tsy handrakotra ny modal.Lohateny
Vatiny fototra
Rehefa manindry ny bokotra "Open Modal" ianao, ny modal dia apetraka eo anoloan'ny zavatra hafa rehetra araka ny tokony ho izy. Jereo ny Scenario Pen 1: Ny Modèle Voafandrika (Vahaolana) [voasampana] nataon'i Shoyombo Gabriel Ayomide. Ahitsio NyNy toe-javatra misy ny ray aman-dreny amin'ny CSS Ahoana raha tsy afaka mihetsika ny singa raha tsy manapaka ny drafitra? Tsara kokoa ny mamaha ny olana: ny ray aman-dreny no mametraka ny teny manodidina. Tadiavo ny fananana CSS (na fananana) tompon'andraikitra amin'ny famoahana ny contexte ary esory izany. Raha misy tanjona ka tsy azo esorina dia omeo sanda z-index ambony kokoa noho ireo singa iray tampo aminy ny ray aman-dreny mba hampiakatra ny fitoeran-javatra iray manontolo. Miaraka amin'ny sandan'ny z-index ambony kokoa, ny fitahirizana ray aman-dreny dia mifindra any an-tampony, ary ny zanany dia miseho manakaiky kokoa ny mpampiasa. Miorina amin'ny zavatra nianarantsika tao amin'ny scenario "The Submerged Dropdown", tsy afaka mamindra ny dropdown avy amin'ny navbar isika; tsy misy dikany izany. Na izany aza, azontsika atao ny mampitombo ny sandan'ny z-index an'ny container .navbar ho lehibe kokoa noho ny sanda z-index an'ny singa .content. .navbar { fiaviana: #333; /* z-index: 1; */ z-fanondro: 3; toerana: havana; }
Miaraka amin'ity fanovana ity, ny .dropdown-menu dia miseho eo anoloan'ny atiny tsy misy olana.
Jereo ny Scenario Pen 2: Ny Fidina anaty rano (Vahaolana) [voasampana] nataon'i Shoyombo Gabriel Ayomide.
Andramo ny Portals, raha mampiasa Framework
Ao amin'ny rafitra toy ny React na Vue, ny Portal dia endri-javatra ahafahanao mamadika singa ivelan'ny ambaratongan'ny ray aman-dreny mahazatra ao amin'ny DOM. Ny vavahady dia toy ny fitaovana teleportation ho an'ny singanao. Avelany ianao handika ny HTML an'ny singa iray na aiza na aiza ao amin'ny antontan-taratasy (matetika ao amin'ny document.body) sady mitazona azy ho mifandray amin'ny ray aman-dreniny voalohany ho an'ny fitaovana, fanjakana ary hetsika. Ity dia tonga lafatra amin'ny fandosiran'ny fandrika contexte satria ny vokatra nadika dia miseho ara-bakiteny ivelan'ny fitoeran'ny ray aman-dreny manana olana.
ReactDOM.createPortal(
Izany dia miantoka fa tsy miafina ao ambadiky ny ray aman-dreniny ny atiny fidinao, na dia mihoa-pampana aza ny ray aman-dreny: miafina na z-index ambany. Ao amin'ny scenario "The Clipped Tooltip" nojerentsika teo aloha, dia nampiasa Portal aho mba hamonjena ny fitaovana amin'ny fihoaram-pefy: clip miafina amin'ny fametrahana azy ao amin'ny vatan'ny antontan-taratasy ary mametraka azy eo ambonin'ny trigger ao anaty fitoeran-javatra. Jereo ny Scenario Pen 3: Ny Tooltip (Vahaolana) [voaforona] nataon'i Shoyombo Gabriel Ayomide. Fampidirana ny Context Stacking tsy misy voka-dratsy Ny fomba fiasa rehetra nohazavaina tao amin'ny fizarana teo aloha dia mikendry ny "hamongotra" ireo singa avy amin'ny tontolon'ny fametahana olana, saingy misy toe-javatra sasany izay tena ilainao na tianao hamoronana contexte stacking. Mora ny mamorona contexte stacking vaovao, saingy misy vokany ny fomba rehetra. Izany hoe, afa-tsy ny fampiasana mitoka-monina: mitokantokana. Rehefa ampiharina amin'ny singa iray, dia voafaritra amin'ny ankizy tsirairay sy ao anatin'io toe-javatra io ny tontolon'ny fitambaran'ny zanak'io singa io, fa tsy voataonan'ny singa ivelan'izany. Ny ohatra mahazatra dia manome sanda ratsy io singa io, toy ny z-index: -1. Alaivo sary an-tsaina hoe manana singa .card ianao. Te-hanampy endrika haingon-trano izay mipetraka ao ambadiky ny lahatsoratry ny .card ianao, fa eo an-tampon'ny lafin'ny karatra. Raha tsy misy contexte stacking eo amin'ny karatra, z-index: -1 dia mandefa ny endrika mankany amin'ny faran'ny contexte stacking root (ny pejy iray manontolo). Izany no mahatonga azy hanjavona ao ambadiky ny .card ny fotsy fotsy: Jereo ny Pen Negative z-index (olana) [voasampana] nataon'i Shoyombo Gabriel Ayomide. Mba hamahana izany, dia manambara fitokanana izahay: mitoka-monina amin'ny .card ray aman-dreny: Jereo ny Pen Negative z-index (vahaolana) [voaforona] nataon'i Shoyombo Gabriel Ayomide. Ankehitriny, ny singa .card mihitsy no lasa contexte stacking. Rehefa manana z-index: -1 ny singan-janany — ilay endrika haingon-trano noforonina ao amin'ny :before pseudo-element — dia mandeha any amin'ny faran'ny tontolon'ny fitambaran'ny ray aman-dreny. Mipetraka tsara ao ambadiky ny lahatsoratra sy eo an-tampon'ny lafin'ny karatra izy io, araka ny nokasaina. Fehiny Tsarovy: amin'ny fotoana manaraka toa tsy voafehy ny z-index anao dia contexte stacking voafandrika izany. References
Contexte stacking (MDN) Z-index sy contexte stacking (web.dev) "Ahoana ny fomba hamoronana toe-javatra vaovao stacking miaraka amin'ny fananana mitoka-monina ao amin'ny CSS", Natalie Pina "What The Heck, z-index??", Josh Comeau
Famakiana fanampiny momba ny SmashingMag
"Ny fitantanana CSS Z-Index amin'ny tetikasa lehibe", Steven Frieson "Lohateny mipetaka sy singa feno haavo: fitambarana sarotra", Philip Braunen "Fitantanana Z-Index amin'ny fampiharana tranonkala mifototra amin'ny singa", Pavel Pomerantsev "Ny Z-Index CSS fananana: fijery feno", Louis Lazaris
