Ma we qet z-index: 99999 li ser hêmanek di CSS-ya xwe de destnîşan kiriye, û ew li ser hêmanên din dernakeve? Nirxek ew qas mezin divê bi hêsanî wê hêmanê bi dîtbarî li ser her tiştê din bi cîh bike, bihesibîne ku hemî hêmanên cihêreng li nirxek kêmtir hatine danîn an jî qet nehatine danîn. Malperek bi gelemperî di cîhek du-alî de tê destnîşan kirin; lêbelê, bi sepandina taybetmendiyên CSS-ê yên taybetî, balafirek z-xeyal a xeyalî tê destnîşan kirin ku kûrahiyê ragihîne. Ev balafir li ser ekranê perpendîkular e, û ji wê ve, bikarhêner rêza hêmanan, yek li ser ya din dihese. Fikra li pişt z-xeyaleya xeyalî, têgihîştina bikarhêner a hêmanên lihevkirî, ev e ku taybetmendiyên CSS-ê yên ku wê diafirînin li hev dikin ku ya ku em jê re dibêjin çarçoveyek stûnê pêk bînin. Em ê bipeyivin ka hêman çawa li ser malperek "lihevkirî" têne kirin, çi fermana berhevkirinê kontrol dike, û nêzîkatiyên pratîkî yên ji bo hêmanên "hilweşandin" dema ku hewce be. Di derbarê Stacking Contexts Malpera xwe wekî maseyek bifikirin. Gava ku hûn hêmanên HTML-ê lê zêde dikin, hûn perçeyên kaxezê, yek li dû yê din, li ser maseyê datînin. Parçeya paşîn a kaxezê ku hatî danîn bi hêmana HTML-ê ya herî dawî hatî zêdekirin re wekhev e, û ew li ser hemî kaxezên din ên ku li ber wê hatine danîn rûniştiye. Ev herikîna belgeya normal e, tewra ji bo hêmanên hêlîn. Desk bi xwe çarçoweya stackkirina root, ku ji hêla hêmana ve hatî çêkirin, ku hemî peldankên din vedihewîne, temsîl dike. Naha, taybetmendiyên taybetî yên CSS-ê têne lîstikê. Taybetmendiyên mîna pozîsyonê (bi z-index), nezelalbûn, veguheztin, û dihewîne) mîna peldankek tevdigerin. Ev peldank hêmanek û hemî zarokên wê digire, wan ji stûna sereke derdixe, û wan di bin-stackek veqetandî de kom dike, ya ku em jê re dibêjin çarçoveyek berhevkirinê diafirîne. Ji bo hêmanên pozîsyonê, ev diqewime dema ku em ji bilî otomatîk nirxek z-indexek din diyar dikin. Ji bo taybetmendiyên mîna nezelaliyê, veguherîn, û parzûnê, dema ku nirxên taybetî têne sepandin, çarçoweya stacking bixweber tê afirandin.
Biceribînin ku hûn vê yekê fêm bikin: Gava ku kaxezek (ango, hêmanek zarok) di hundurê peldankek de be (ango, çarçoveyek berhevkirina dêûbav), ew çu carî nikare ji wê peldankê derkeve an jî di nav kaxezên peldankek cûda de were danîn. Z-indexa wê naha tenê di hundurê peldanka xwe de têkildar e.
Di nîgara jêrîn de, Kaxeza B naha di nav çarçoweya berhevkirina Peldanka B de ye, û tenê dikare bi kaxezên din ên di peldankê de were ferman kirin.
Bifikirin, ger hûn bixwazin, du peldankên we li ser maseya we hene:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Ka em nîşankirinê hinekî nûve bikin. Di hundurê Peldanka A de rûpelek taybetî ye, z-index: 9999. Di hundurê Peldanka B de rûpelek hêsan e, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Kîjan rûpel li jor e? Ew rûpela .plain-a Peldanka B ye. Gerok kaxezên zarokan paşguh dike û du peldankan pêşî li hev dixe. Ew Peldanka B (z-index: 2) dibîne û wê li ser Peldanka A (z-index: 1) datîne ji ber ku em dizanin ku du ji yekê mezintir e. Di vê navberê de, rûpela .special-ya ku li ser z-index: 9999 hatî danîn li binê stakê ye her çend z-indexa wê li nirxa herî bilind a gengaz hatî danîn. Di heman demê de çarçoveyên stûyê jî dikarin werin hêlîn (peldankên di hundurê peldankan de), "dara malbatê" çêbikin. Heman prensîb derbas dibe: zarok tu carî nikare ji peldanka dêûbavên xwe bireve. Naha ku hûn digihîjin ka çawa çarçoweya berhevkirinê mîna peldankên ku kom dikin û qatan ji nû ve rêz dikin tevdigerin, hêja ye ku hûn bipirsin: çima hin taybetmendî - mîna veguheztin û nezelaliyê - çarçoveyên nû yên lihevkirinê diafirînin? Tiştek li vir ev e: ev taybetmendî ji ber ku ew çawa xuya dikin, çarçoveyek lihevkirinê naafirînin; ew wiya dikin ji ber ku gerok çawa di binê kapê de dixebite. Gava ku hûn veguherîn, nezelalbûn, fîlter, an perspektîfê bicîh dikin, hûn ji gerokê re dibêjin, "Hey, ev hêman dibe ku bizivire, bizivire, an şîn bibe, ji ber vê yekê amade bin!"
Dema ku hûn van taybetmendiyan bikar tînin, gerokek çarçoveyek nû ya stûnê diafirîne da ku vekêşanê bi bandortir birêve bibe. Ev rê dide gerokê ku anîmasyon, veguherîn, û bandorên dîtbarî serbixwe bi rê ve bibe, hewcedariya ji nû ve hesabkirina ka van hêmanan çawa bi rûpela mayî re têkilî daynin kêm dike. Bifikirin ku gerok dibêje, "Ez ê vê peldankê ji hev veqetînim da ku ez neçar mam ku her carê ku tiştek di hundurê wê de diguhezîne tevahiya maseyê ji nû ve biguherînim." Lê heyebandorek alî. Gava ku gerok hêmanek hildiweşîne nav qata xwe, divê ew her tiştî di hundurê xwe de "teqand" bike, û çarçoveyek nû ya stûnê biafirîne. Mîna ku peldankek ji ser maseyê derxîne da ku wê ji hev cuda bi dest bixe; her tişt di hundurê wê peldankê de kom dibe, û gerok naha dema ku biryar dide ka çi li ser çi rûne, wê wekî yekîneyek yekta dike. Ji ber vê yekê her çend taybetmendiyên veguherîn û nezelaliyê dibe ku bandorê li ser awayê ku hêman bi dîtbarî disekinin bandor neke, ew dikin, û ew ji bo xweşbînkirina performansê ye. Gelek taybetmendiyên din ên CSS-ê jî dikarin ji ber sedemên mîna hev çarçoveyên stacking çêbikin. Heke hûn dixwazin kûrtir bikolin MDN navnîşek bêkêmasî peyda dike. Gelek hindik hene, ku tenê destnîşan dike ka meriv çiqas hêsan e ku meriv bêyî ku pê zanibe bêyî ku hûn pê zanibin, bi bêhemdî çarçoveyek stûyê biafirînin. Pirsgirêka "Rakirin"ê Pirsgirêkên stacking dikare ji ber gelek sedeman çêbibin, lê hin ji yên din gelemperîtir in. Pêkhateyên modal nimûneyek klasîk in ji ber ku ew pêdivî ye ku pêvekê biguhezînin da ku li ser qatek jorîn li ser hemî hêmanên din "vebe", dûv re gava "girtî" ew ji qata jorîn derxînin. Ez pir pê bawer im ku em hemî ketine rewşek ku em modalek vedikin û, ji ber çi sedemê be, ew xuya nake. Ne ew e ku ew bi rêkûpêk venebûye, lê ew di qatek jêrîn a çarçoveyek stûyê de ji ber çavan e. Ev dihêle hûn bipirsin "çawa?" ji ber ku we destnîşan kir:
.overlay { pozîsyon: sabît; /* çarçoweya lihevkirinê diafirîne */ z-index: 1; /* hêmanê li ser her tiştî li ser qatekê dixe */ inset: 0; firehî: 100%; bilindahî: 100vh; overflow: veşartî; background-color: #00000080; }
Ev rast xuya dike, lê heke hêmana dêûbav ku teşqela modal vedihewîne hêmanek zarok e di nav hêmanek dêûbav din de ku ew jî wekî z-index hatiye danîn: 1, ew modal ji hêla teknîkî ve di binxalayek ku ji hêla peldanka sereke ve hatî nepenî de cîh dike. Ka em li wê senaryoya taybetî û çend xefikên din ên hevpar ên stacking-context binêrin. Ez difikirim ku hûn ê ne tenê bibînin ka meriv çiqas hêsan e ku meriv bi bêhemdî çarçoweyên xêzkirinê biafirîne, lê di heman demê de meriv çawa wan xirab îdare dike. Di heman demê de, hûn çawa vedigerin dewletek rêvebirinê bi rewşê ve girêdayî ye. Senaryo 1: Modala Xopkirî
Hûn dikarin tavilê modala xwe ya ku di qatek nizm de girtî ye bibînin û dêûbav nas bikin. Berfirehkirina Browser Pêşdebirên zîrek ji bo alîkariyê dirêjkirin çêkirine. Amûrên mîna vê pêveka "CSS Stacking Context Inspector" pêvekek Chrome-ê z-indexek zêde li DevToolên we zêde dikin da ku agahdariya li ser hêmanên ku çarçoveyek berhevkirinê diafirînin nîşanî we bidin.
Berfirehkirina IDE Tewra hûn dikarin pirsgirêkan di dema pêşkeftinê de bi pêvekek mîna vê yekê ji bo VS Code-yê bibînin, ku pirsgirêkên potansiyel ên çarçovê rasterast di edîtorê we de ronî dike.
Rakirin Û Vegerandina Kontrolê Piştî ku me sedema bingehîn nas kir, gava din ev e ku meriv pê re mijûl bibe. Gelek nêzîkatiyên ku hûn dikarin ji bo çareserkirina vê pirsgirêkê bavêjin hene, û ez ê wan rêz bikim. Hûn dikarin di her astê de her kesê hilbijêrin, her çend; kes nikare gilî û gazincên din bike. Structure HTML-ê biguherînin Ev çareseriyek çêtirîn tête hesibandin. Ji bo ku hûn bikevin nav pirsgirêkek çarçoweya stackingê, divê hûn di nav HTML-a xwe de hin hêman di pozîsyonên xweş de bi cih kirine. Ji nû veavakirina rûpelê dê ji we re bibe alîkar ku hûn DOM-ê ji nû ve şekil bikin û pirsgirêka çarçoweya stackê ji holê rakin. Hêmana pirsgirêkê bibînin û wê ji hêmana xefikê ya di nîşankirina HTML-ê de derxînin. Mînakî, em dikarin senaryoya yekem, "Modala Xopkirî" çareser bikin, bi derxistina .modal-konteyner ji sernivîsê û bi cîhkirina wê di hêmana
de bi serê xwe.Vê naverokê z-indexek 2 heye û hîn jî modal nagire. Sernivîs
Naveroka sereke
Gava ku hûn bişkoka "Open Modal" bikirtînin, modal li ber her tiştê din wekî ku tê xwestin tê danîn. Binêre Senaryoya Pênûsê 1: Modala Girtî (Çareserî) [jihevkirî] ji hêla Shoyombo Gabriel Ayomide ve. Eyar bikinDêûbav Di CSS-ê de Têkiliya Stacking Ger hêman yek be ku hûn nikaribin bêyî şkandina layoutê bilivînin? Çêtir e ku meriv pirsgirêkê çareser bike: dêûbav çarçoveyê saz dike. Taybetmendiya CSS-ê (an taybetmendiyên) ku ji bo vekirina naverokê berpirsiyar e bibînin û wê jêbirin. Ger armancek wê hebe û neyê rakirin, ji dêûbav nirxek z-indeksa bilindtir ji hêmanên xwişk û birayên xwe bidin da ku tevahiya konteynerê rake. Bi nirxek z-indeksa bilindtir, konteynera dêûbav ber bi jor ve diçe, û zarokên wê nêzîkê bikarhêner xuya dikin. Li ser bingeha tiştê ku em di senaryoya "Dropdown Binavkirî" de fêr bûn, em nekarin dakêşana ji navbarê derxînin; ew ê ne wateya. Lêbelê, em dikarin nirxa z-indexa konteynera .navbar zêde bikin ku ji nirxa z-indexa hêmana .naverokê mezintir be. .navbar { background: #333; /* z-index: 1; */ z-index: 3; pozîsyon: relativ; }
Bi vê guhertinê, .dropdown-menu êdî bêyî pirsgirêk li ber naverokê xuya dibe.
Binêre Senaryoya Pênûsê 2: Dropdown Binavkirî (Çareserî) [jihevkirî] ji hêla Shoyombo Gabriel Ayomide ve.
Ger çarçoveyek bikar bînin, Portalan biceribînin
Di çarçoveyên mîna React an Vue de, Portal taybetmendiyek e ku dihêle hûn pêkhateyek li derveyî hiyerarşiya dêûbavê xweya normal di DOM-ê de bidin. Portal ji bo pêkhateyên we wekî amûrek teleportasyonê ne. Ew dihêlin ku hûn HTML-a pêkhateyek li her deverek belgeyê bidin (bi gelemperî rast di document.body de) di heman demê de ku wê bi mentiqî bi dêûbavê xweya orîjînal ve ji bo pêvek, rewş û bûyeran ve girêdayî ye. Ev ji bo revîna ji xefikên çarçoweya lihevnekirinê bêkêmasî ye ji ber ku hilbera çêkirî bi rastî li derveyî konteynera dêûbavê pirsgirêk xuya dike.
ReactDOM.createPortal(
Ev piştrast dike ku naveroka weya dakêşanê li pişt dêûbavê xwe veneşêre, hetta dêûbav zêde be jî: veşartî an z-indexek jêrîn. Di senaryoya "Amûra Clipped" de ku me berê lê nihêrî, min Portalek bikar anî da ku şîreta amûrê ji serpêhatiyê rizgar bikim: klîba veşartî bi danîna wê di laşê belgeyê de û danîna wê li jorê tetikê di hundurê konteynerê de. Binêre Senaryoya Pênûsê 3: Serpêhatiya Amûra Birêkûpêk (Çareserî) [jihevkirî] ji hêla Shoyombo Gabriel Ayomide ve. Danasîna Çarçoveya Stacking Bê Bandorên Alîkî Hemî nêzîkbûnên ku di beşa berê de hatine rave kirin armanc ew e ku hêmanên ji çarçoveyek kêşebar a pirsgirêkê "veqetandin" hene, lê hin rewş hene ku hûn ê bi rastî hewce bikin an bixwazin ku çarçoveyek xêzkirinê biafirînin. Afirandina çarçoveyek nû ya stacking hêsan e, lê hemî nêzîkatî bi bandorek aliyek têne. Yanî ji bilî bikaranîna îzolasyonê: îzolekirin. Dema ku li ser hêmanek were sepandin, li şûna ku ji hêmanên li derveyî wê bandor bibe, çarçoweya berhevkirina zarokên wê hêmanê li gorî her zarokek û di nav wê çarçovê de tê destnîşankirin. Mînaka klasîk ev e ku wê hêmanê nirxek neyînî bide, wek z-index: -1. Bifikirin ku we pêkhateyek .kart heye. Hûn dixwazin şeklek xemilandî ya ku li pişt nivîsa .qertê rûniştî lê li ser paşxaneya qertê lê zêde bikin. Bêyî çarçoveyek lihevkirinê ya li ser qertê, z-index: -1 şeklê dişîne binê çarçoweya berhevkirina root (tevahiya rûpelê). Ev dihêle ku ew li pişt paşxaneya spî ya .kartê winda bibe: Binêre Pen Negative z-index (pirsgirêk) [forked] ji hêla Shoyombo Gabriel Ayomide. Ji bo çareserkirina vê, em tecrîdê radigihînin: îzolekirin li ser dêûbav .kartê: Binêre Pen Negative z-index (çareserî) [forked] ji hêla Shoyombo Gabriel Ayomide. Naha, hêmana .kartê bixwe dibe çarçoveyek stûyê. Gava ku hêmana wê ya zarok - şeklê xemilandî yê ku li ser :berî pseudo-elementê hatî çêkirin - z-index: -1 heye, ew diçe binê çarçoweya berhevkirina dêûbav. Ew bi rengek bêkêmasî li pişt nivîsê û li ser pişta qertê, wekî ku tê armanc kirin, rûne. Encam Bînin bîra xwe: Cara din ku z-indexa we ji kontrolê dernakeve, ew çarçoveyek stêrkek girtî ye. Çavkanî
Çarçoveya lihevkirinê (MDN) Z-indeks û çarçoveyek lihevkirinê (web.dev) Natalie Pina "Bi Taybetmendiya Veqetandinê re li CSS-ê Meriv çawa Têkiliyek Nû ya Stacking Biafirîne", Natalie Pina "What The Heck, z-index??", Josh Comeau
Xwendina Zêdetir Li SmashingMag
"Birêvebirina CSS Z-Index Di Projeyên Mezin de", Steven Frieson "Serokên zeliqandî û hêmanên tev-bilind: Kombînasyonek dijwar", Philip Braunen Pavel Pomerantsev "Birêvebirina Z-Index Di Serlêdanek Web-Bingeha Pêkhateyan de" "Taybetmendiya Z-Index CSS: Nêrînek Berfireh", Louis Lazaris
