Wakamboseta z-index: 99999 pane chinhu chiri muCSS yako, uye haibude pamusoro pezvimwe zvinhu? Kukosha kwakakura kunofanirwa kuisa chinhu ichocho zviri nyore pamusoro pechimwe chinhu, tichifunga kuti zvinhu zvese zvakasiyana zvakaiswa pamutengo wakaderera kana kusaiswa zvachose. Peji rewebhu rinowanzomiririrwa munzvimbo ine mativi maviri; zvisinei, nekushandisa chaiyo CSS zvivakwa, yekufungidzira z-axis ndege inounzwa kuratidza kudzika. Iyi ndege inotarisana nechidzitiro, uye kubva pairi, mushandisi anoona kurongeka kwezvinhu, imwe pamusoro peimwe. Pfungwa iri kuseri kwekufungidzira z-axis, maonero emushandisi ezvinhu akaturikidzana, nderekuti zvivakwa zveCSS zvinoigadzira zvinosangana kuumba yatinodaidza kuti stacking mamiriro. Isu tichataura nezve kuti zvinhu "zvakarongedzerwa" sei pawebhu peji, chii chinodzora kurongeka, uye maitiro anoshanda e "unstack" zvinhu pazvinenge zvichidikanwa. Nezve Stacking Contexts Fungidzira peji rako rewebhu sedhesiki. Sezvaunowedzera HTML zvinhu, uri kuisa zvidimbu zvepepa, imwe pashure peimwe, padhesiki. Pepa rekupedzisira rakaiswa rakaenzana neachangowedzerwa HTML element, uye rinogara pamusoro pemamwe mapepa akaiswa pamberi paro. Uku ndiko kuyerera kwegwaro rakajairwa, kunyangwe kune nested zvinhu. Iyo dhesiki pachayo inomiririra iyo midzi stacking mamiriro, akaumbwa neiyo element, iyo ine mamwe ese maforodha. Ikozvino, chaiyo CSS zvivakwa zvinouya kutamba. Zvivakwa zvakaita sechinzvimbo (ine z-index), opacity, shandura, uye zvine) kuita senge folda. Iyi folda inotora chinhu uye zvese zvevana vayo, inovabvisa kubva kuhombe stack, uye inovaisa mune yakaparadzana sub-stack, ichigadzira yatinoti stacking mamiriro. Pazvinhu zvakamisikidzwa, izvi zvinoitika patinozivisa kukosha kwez-index kunze kwe auto. Kune zvivakwa zvakaita se opacity, shanduko, uye sefa, iyo stacking mamiriro anogadzirwa otomatiki kana chaiwo hunhu hwaiswa.
Edza kunzwisisa izvi: Kana bepa (kureva, chinhu chemwana) chava mukati mefolda (kureva, mamiriro emubereki), haringambobudi paforodha iroro kana kuiswa pakati pemapepa mune rimwe folda. Yayo z-index ikozvino inongoshanda mukati meiyo folda.
Mumufananidzo uri pazasi, Pepa B rave mukati meiyo stacking mamiriro eFolder B, uye rinogona kuodha chete nemamwe mapepa mufolda.
Fungidzira, kana uchida, kuti une maforodha maviri padhesiki rako:
.folder-a {z-index: 1; } .folder-b {z-index: 2; }
Ngatigadzirise markup zvishoma. Mukati meFolder A mune peji yakakosha, z-index: 9999. Mukati meFolder B mune peji iri nyore, z-index: 5.
.special-peji {z-index: 9999; } .plain-peji {z-index: 5; }
Nderipi peji riri pamusoro? Ndiyo .plain-peji muFolder B. Bhurawuza inofuratira mapepa emwana uye inorongedza maforodha maviri kutanga. Inoona Folder B (z-index: 2) uye inoiisa pamusoro peFolder A (z-index: 1) nokuti tinoziva kuti maviri makuru pane imwe. Zvichakadaro, iyo .special-peji yakaiswa ku z-index: 9999 peji iri pazasi pe stack kunyangwe zvayo z-index yakaiswa kune yepamusoro-soro kukosha. Kurongedza mamiriro anogona zvakare kuiswa (maforodha mukati memaforodha), kugadzira "muti wemhuri." Izvi zvinoshandawo: mwana haambofi akatiza fodhi yevabereki vake. Iye zvino zvaunowana maitiro ekuisa mamiriro akaita senge maforodha eboka uye kurongedzazve maseru, zvakafanira kubvunza: nei zvimwe zvivakwa - sekushandura uye opacity - kugadzira mitsva yekurongedza mamiriro? Hechino chinhu: izvi zvivakwa hazvigadziri stacking mamiriro nekuda kwemaitiro avanoita; vanozviita nekuda kwemashandiro anoita browser pasi pehodhi. Paunoshandisa shanduko, opacity, sefa, kana maonero, unenge uchiudza browser, "Hei, chinhu ichi chinogona kufamba, kutenderera, kana kupera, saka gadzirira!"
Paunoshandisa zvivakwa izvi, bhurawuza inogadzira nyowani stacking mamiriro ekugadzirisa kupa zvakanyanya. Izvi zvinobvumira bhurawuza kubata maanimation, kushandura, uye zvinoonekwa zvakazvimiririra, zvichideredza kukosha kwekudzokorora kuti zvinhu izvi zvinodyidzana sei neimwe peji. Funga nezvayo sebrowser ichiti, "Ndichabata iyi dhairekitori zvakasiyana saka handifanire kugadzirisa dhesiki rese pese kana chimwe chinhu chiri mukati chachinja." Asi zviripoa side effect. Kana bhurawuza rasimudza chinhu muchikamu chayo, rinofanira "kupfavisa" zvese zviri mukati mayo, ichigadzira mamiriro matsva ekurongedza. Zvakafanana nekubvisa folda padhesiki kuti uibate zvakasiyana; zvese zviri mukati meiyo folda zvinoiswa mumapoka, uye bhurawuza ikozvino rinobata sechinhu chimwe chete kana uchifunga kuti chii chinogara pamusoro pechii. Saka kunyangwe iyo shanduko uye opacity zvivakwa zvingasaita senge zvichikanganisa nzira iyo zvinhu zvinomira zvinoonekwa, zvavanoita, uye ndezvekuita optimization. Mamwe akati wandei eCSS zvivakwa anogona zvakare kugadzira stacking mamiriro ezvikonzero zvakafanana. MDN inopa runyoro rwakakwana kana iwe uchida kuchera zvakadzika. Kune akati wandei, ayo anongoratidza kuti zviri nyore sei kugadzira nekusaziva kurongedza mamiriro usingazvizive. Iyo "Unstacking" Dambudziko Stacking nyaya dzinogona kumuka nekuda kwezvikonzero zvakawanda, asi zvimwe zvakajairika kupfuura zvimwe. Zvikamu zveModal imhando yemhando yepamusoro nekuti inoda kushandura chikamu kuti "chivhure" padanho repamusoro pamusoro pezvimwe zvinhu zvese, wozoibvisa kubva kumusoro kana "yakavharwa." Ndine chivimbo chekuti isu tese takapinda mumamiriro ezvinhu apo isu tinovhura modal uye, chero chikonzero, haioneke. Hakusi kuti haina kuvhurika nemazvo, asi kuti iri kunze kwekuona muchikamu chepasi chemamiriro ekuisa. Izvi zvinokusiya iwe uchishamisika "zvakaita sei?" kubva pawakaseta:
.overlay { chinzvimbo: fixed; /* inogadzira iyo stacking mamiriro */ z-index: 1; /* inoisa chinhu padanho pamusoro pezvimwe zvese */ mukati: 0; hupamhi: 100%; kureba: 100vh; kufashukira: zvakavanzika; kumashure-ruvara: #00000080; }
Izvi zvinotaridzika zvakanaka, asi kana chinhu chemubereki chine modal trigger chiri chinhu chemwana mukati mechimwe chinhu chemubereki chakaiswawo ku z-index: 1, iyo nehunyanzvi inoisa modal mune sublayer yakavharwa neiyo huru folda. Ngatitarisei iyo chaiyo mamiriro uye akati wandei mamwe akajairwa stacking-mamiriro ezvinhu. Ini ndinofunga iwe hauzongoona chete kuti zviri nyore sei kugadzira nekusaziva kurongedza mamiriro, asiwo maitiro ekuzvibata zvisizvo. Zvakare, kuti unodzokera sei kune inotungamirwa nyika zvinoenderana nemamiriro ezvinhu. Mamiriro Ekutanga: Iyo Yakabatwa Modal
Iwe unogona pakarepo kuona yako modal yakavharirwa mune yakaderera-level layer uye kuona mubereki. Browser Extensions Vagadziri veSmart vakavaka ekuwedzera kubatsira. Zvishandiso zvakaita seiyi "CSS Stacking Context Inspector" Chrome yekuwedzera wedzera imwe z-index tebhu kune yako DevTools kuti ikuratidze ruzivo nezve zvinhu zvinogadzira mamiriro akaturikidzana.
IDE Extensions Iwe unogona kunyange kuona nyaya panguva yekusimudzira nekuwedzera senge iyi yeVS Code, iyo inosimbisa inogona kurongedza nyaya dzemukati zvakananga mupepeti yako.
Unstacking uye Kudzoreredza Kudzora Mushure mekunge taziva chikonzero, danho rinotevera ndechekugadzirisa. Pane nzira dzinoverengeka dzaungatora kuti ugadzirise dambudziko iri, uye ini ndichadzinyora muhurongwa. Iwe unogona kusarudza chero munhu pane chero nhanho, zvakadaro; hapana anogona kunyunyuta kana kuvharidzira mumwe. Shandura Iyo HTML Mamiriro Izvi zvinoonekwa seyakanyanya kugadzirisa. Kuti iwe umhanye mune yakarongedza mamiriro ezvinhu, unofanirwa kunge wakaisa zvimwe zvinhu munzvimbo dzinosetsa mukati meHTML yako. Kugadzirisazve peji kuchakubatsira iwe kugadziridza iyo DOM uye kubvisa iyo stacking mamiriro dambudziko. Tsvaga chinhu chinonetsa uye chibvise kubva pane chinoteya chinhu muHTML markup. Semuenzaniso, tinogona kugadzirisa mamiriro ekutanga, "The Trapped Modal," nekufambisa .modal-container kunze kwemusoro nekuiisa mu
element yega.Zvirimu izvi zvine z-index ye2 uye hazvisati zvavhara modal.Musoro
Main Content
Enjoyed This Article?
Get weekly tips on growing your audience and monetizing your content — straight to your inbox.
No spam. Join 138,000+ creators. Unsubscribe anytime.