CS-de bir elemente z-index: 99999 goýduňyzmy we beýleki elementleriň üstünde çykmaýarmy? Uly bir baha, dürli elementleriň has pes bahada ýa-da asla kesgitlenmändigini göz öňünde tutup, şol elementi aňsatlyk bilen başga bir zadyň üstünde goýmalydyr. Web sahypasy, adatça, iki ölçegli giňişlikde görkezilýär; şeýle-de bolsa, belli bir CSS häsiýetlerini ulanyp, çuňlugy ýetirmek üçin hyýaly z-ok tekizligi girizilýär. Bu tekizlik ekrana perpendikulýar we ondan ulanyjy elementleriň tertibini, beýlekisiniň üstünde duýýar. Hyýaly z-okuň aňyrsyndaky pikir, ulanyjynyň gaplanan elementlere bolan garaýşy, ony döredýän CSS häsiýetleri birleşip, “kontekst” diýilýän zady emele getirýär. Web sahypasynda elementleriň nädip “ýerleşdirilendigi”, tertipleşdiriş tertibine gözegçilik edýän zatlar we zerur bolanda “aýyrmak” elementlerine amaly çemeleşmeler hakda gürleşmekçi. Kontekstiň mazmuny barada Web sahypaňyzy stol hökmünde göz öňüne getiriň. HTML elementlerini goşanyňyzda, stoluň üstünde yzly-yzyna kagyz böleklerini goýýarsyňyz. Iň soňky ýerleşdirilen kagyz, iň soňky goşulan HTML elementine deňdir we öňündäki beýleki kagyzlaryň üstünde otyr. Bu adaty resminama akymy, hatda öýjükli elementler üçinem. Stoluň özi, beýleki ähli bukjalary öz içine alýan elementi tarapyndan emele gelen kök ýygnamak kontekstini görkezýär. Indi aýratyn CSS häsiýetleri güýje girýär. Positionerleşişi (z-indeks bilen), düşnüksizlik, üýtgetmek we saklamak ýaly häsiýetler bukja ýaly hereket edýär. Bu bukja bir elementi we ähli çagalaryny alýar, olary esasy topbakdan çykarýar we aýratyn mazmunly toparlara bölýär we “stacking” konteksti diýýäris. Positionerleşýän elementler üçin, bu awtoulagdan başga z-indeks bahasyny yglan edenimizde bolýar. Aç-açanlyk, üýtgetmek we süzgüç ýaly häsiýetler üçin aýratyn bahalar ulanylanda ýygnamak mazmuny awtomatiki usulda döredilýär.
Muňa düşünmäge synanyşyň: Bir kagyz (meselem, çaga elementi) bir bukjanyň içinde (ýagny, ene-atanyň mazmuny), ol bukjadan hiç wagt çykyp bilmez ýa-da kagyzlaryň arasynda başga bukjada ýerleşdirilip bilinmez. Z-indeks indi diňe öz bukjasynyň içinde möhümdir.
Aşakdaky suratda, B kagyzy indi B bukjasynyň mazmunyndadyr we diňe bukjadaky beýleki kagyzlar bilen sargyt edip bolýar.
Isleseňiz, stoluňyzda iki bukjanyň bardygyny göz öňüne getiriň:
.folder-a {z-index: 1; } .folder-b {z-index: 2; }
Belligi biraz täzeläliň. A bukjanyň içinde ýörite sahypa, z-indeks: 9999. B bukjanyň içinde ýönekeý sahypa, z-indeks: 5.
ýörite sahypa {z-indeks: 9999; } .plain-page {z-index: 5; }
Haýsy sahypa ýokarda? Bu, B bukjadaky açyk sahypa. Brauzer çaga kagyzlaryna ähmiýet bermeýär we ilki iki bukjany ýerleşdirýär. B bukjany (z-index: 2) görýär we A bukjanyň üstünde goýýar (z-index: 1), sebäbi ikisiniň birden uludygyny bilýäris. Bu aralykda, z-indeks: 9999 sahypa düzülen ýörite sahypa, z-indeksiniň iň ýokary bahasyna bellenen hem bolsa, stakanyň aşagyndadyr. Toplumyň mazmuny “maşgala agajy” döredip, höwürtge döredip biler (bukjalaryň içindäki bukjalar). Şol bir ýörelge ulanylýar: çaga ene-atasynyň bukjasyndan hiç wagt gaçyp bilmez. Toplaýyş we gatlaklary tertipleşdirýän bukjalar ýaly özüni alyp barşyna göz ýetireniňizden soň, sorag bermeli: näme üçin käbir häsiýetler, üýtgeşiklik we aç-açanlyk - täze ýapyş şertlerini döredýär? Ine, bir zat: bu häsiýetler görnüşleri sebäpli yzygiderli mazmun döretmeýär; brauzeriň kapotyň aşagynda nähili işleýändigi sebäpli edýärler. Üýtgetme, aç-açanlyk, süzgüç ýa-da perspektiwany ulananyňyzda, brauzere “Haý, bu element hereket edip, aýlanyp ýa-da öçüp biler, şonuň üçin taýyn boluň!” Diýersiňiz.
Bu häsiýetleri ulananyňyzda, brauzer görkezilişi has netijeli dolandyrmak üçin täze tertipleşdiriş kontekstini döredýär. Bu, brauzere animasiýalary, üýtgeşmeleri we wizual effektleri özbaşdak dolandyrmaga mümkinçilik berýär, bu elementleriň sahypanyň galan bölekleri bilen nähili täsirleşýändigini täzeden hasaplamagyň zerurlygyny azaldýar. Brauzeriň: "Bu bukjany aýratyn dolandyraryn, şonuň üçin her gezek içindäki bir zat üýtgese, stoluňyzy üýtgetmeli däl" diýýän ýaly pikir ediň. Emma barters täsiri. Brauzer bir elementi öz gatlagyna göterenden soň, içindäki ähli zady “tekizlemeli” we täze ýerleşdirme kontekstini döretmeli. Aýry-aýry işlemek üçin stoldan bukjany alýan ýaly; şol bukjanyň içindäki hemme zat toparlanýar we brauzer indi nämäniň üstünde oturýandygyny kesgitläninde ony ýeke birlik hökmünde kabul edýär. Şeýlelik bilen, üýtgeşiklik we aç-açanlyk häsiýetleri elementleriň wizual görnüşde saklanmagyna täsir etmeýän ýaly görünse-de, ýerine ýetirýär we öndürijiligi optimizirlemek üçin. Beýleki birnäçe CSS häsiýetleri hem şuňa meňzeş sebäplere görä yzygiderli mazmuny döredip biler. Çuňňur gazmak isleseňiz, MDN doly sanaw berýär. Diňe bilmän, yzygiderli kontekst döretmegiň nähili aňsatdygyny görkezýän gaty az. “Açmak” meselesi Toplamak meselesi köp sebäplere görä ýüze çykyp biler, ýöne käbirleri beýlekilerden has ýygydyr. Modal komponentler nusgawy nagyş, sebäbi komponenti beýleki elementleriň üstünden ýokarky gatlakda “açmak” üçin üýtgetmegi, soňra “ýapylanda” ýokarky gatlakdan aýyrmagy talap edýär. Hemmämiziň modal açýan we haýsydyr bir sebäbe görä görünmeýän ýagdaýa düşendigimize doly ynanýaryn. Dogry açylmandygy däl-de, eýsem gaplama kontekstiniň aşaky gatynda görünmeýär. Bu sizi “nädip gelýär?” Diýip gyzyklandyrýar. belläniňizden bäri:
.overlay { ýagdaýy: kesgitlenen; / * berkitme kontekstini döredýär * / z-indeks: 1; / * elementi hemme zatdan ýokary gatlakda goýýar * / goýmak: 0; ini: 100%; beýikligi: 100vh; aşmagy: gizlenen; fon-reňk: # 00000080; }
Bu dogry ýaly görünýär, ýöne modal triggeri öz içine alýan esasy element, z-indeks: 1-e düzülen başga bir esasy elementiň içindäki çaga elementi bolsa, modaly tehniki taýdan esasy bukjanyň üsti bilen gizlenen subleýerde ýerleşdirýär. Geliň, şol aýratyn ssenariýa we başga-da birnäçe umumy mazmunly duzaklara seredeliň. Diňe bir gapma-garşylykly mazmuny döretmegiň nähili aňsatdygyny däl, eýsem olary nädip dolandyrmalydygyny hem görersiňiz diýip pikir edýärin. Şeýle hem, dolandyrylýan ýagdaýa nädip dolanyp geljekdigiňize baglydyr. 1-nji ssenariýa: Gaplanan modal
Modalyňyzyň pes derejeli gatlakda gabalanlygyny derrew görüp, ene-atany tanap bilersiňiz. Brauzer giňeltmeleri Akylly döredijiler kömek etmek üçin giňeltmeler gurdular. “CSS Stacking Context Inspector” ýaly gurallar, “Chrome” giňeltmesi, “DevTools” -a goşmaça z-indeks goýmasyny goşýar, size kontekst döredýän elementler barada maglumat görkezýär.
IDE giňeltmeleri Hatda ösüş döwründe meseleleri göni redaktoryňyzda ýerleşdirip boljak kontekst meselelerini görkezýän VS Code üçin şuňa meňzeş giňeltme bilen görüp bilersiňiz.
Aýyrmak we gözegçiligi gaýtadan dikeltmek Munuň düýp sebäbini kesgitlänimizden soň, indiki ädim bu meseläni çözmekdir. Bu meseläni çözmek üçin birnäçe çemeleşip bilersiňiz, men olary tertipde sanap geçerin. Islendik derejedäki islendik adamy saýlap bilersiňiz; hiç kim başga birine arz edip ýa-da päsgel berip bilmez. HTML gurluşyny üýtgediň Bu iň amatly düzediş hasaplanýar. Düzülýän kontekst meselesine girmek üçin HTML-iň içinde käbir elementleri gülkünç ýagdaýda ýerleşdiren bolmaly. Sahypany üýtgedip gurmak, DOM-ny üýtgetmäge we gaplama kontekst meselesini aradan aýyrmaga kömek eder. Mesele elementini tapyň we HTML belligindäki duzak elementinden aýyryň. Mysal üçin, .modal-konteýnerini sözbaşydan çykaryp, ony
elementine ýerleşdirip, “Gaplanan modal” atly ilkinji ssenariýany çözüp bileris. Bu mazmunda z-indeks 2 bar we henizem modaly gurşap almaýar. sözbaşy
Esasy mazmun
Modal ady
Indi men hiç zadyň arkasynda däl. DOM üýtgedip gurmak netijesinde has gowy pozisiýa eýe boldum.
“Açyk modal” düwmesine basanyňyzda, modal bolşy ýaly hemme zadyň öňünde ýerleşýär. Galam 1-nji ssenariýa serediň: Şoýombo Gabriel Aýomide tarapyndan duzakly modal (çözgüt). SazlaňCSS-de ene-atanyň mazmuny Eger element düzülişini bozman hereket edip bilmeýän bolsa näme etmeli? Meseläni çözmek has gowudyr: ene-atanyň mazmuny kesgitlenýär. Kontekstiň döremegine jogapkär CSS häsiýetini (ýa-da häsiýetlerini) tapyň we aýyryň. Eger bir maksady bar bolsa we aýryp bolmaýan bolsa, ene-atanyň ähli konteýnerini götermek üçin dogan elementlerinden has ýokary z-indeks bahasyny beriň. Has ýokary z-indeks bahasy bilen, esasy konteýner ýokarsyna geçýär we çagalary ulanyja has ýakyn görünýär. “Suw astyndaky aşak gaçma” ssenarisinde öwrenen zatlarymyza esaslanyp, aşak gaçmagy deňiz panelinden çykaryp bilmeris; manysy bolmaz. Şeýle-de bolsa, .navbar konteýneriniň z-indeks bahasyny .content elementiniň z-indeks bahasyndan has uly edip bileris. .navbar { fon: # 333; / * z-indeks: 1; * / z-indeks: 3; ýagdaýy: garyndaş }
Bu üýtgeşme bilen .dropdown-menýu indi mazmunyň öňünde hiç hili mesele bolmazdan peýda bolýar.
Galam 2-nji ssenariýa serediň: Şoýombo Gabriel Aýomide tarapyndan suwuň aşagyndaky damja (çözgüt).
Çarçuwany ulanýan bolsaňyz, portallary synap görüň
“React” ýa-da “Vue” ýaly çarçuwalarda Portal, DOM-da adaty ene iýerarhiýasynyň daşyndaky bir komponenti görkezmäge mümkinçilik berýän aýratynlykdyr. Portallar, komponentleriňiz üçin teleportasiýa enjamyna meňzeýär. Komponentiň HTML-sini resminamanyň islendik ýerinde (adatça resminama.body) görkezmäge mümkinçilik berýär, şol bir wagtyň özünde reklamalar, ýagdaýlar we wakalar üçin asyl ene-atasyna logiki taýdan bagly bolýar. Bu, kontekst duzaklaryndan gutulmak üçin ajaýyp, sebäbi görkezilen çykyş sözme-söz problemaly ene konteýneriň daşynda görünýär.
ReactDOM.createPortal (
Bu, aşak düşýän mazmunyň ene-atanyň aňyrsynda gizlenmezligini üpjün edýär, hatda ene-atanyň aşa köp bolsa-da: gizlin ýa-da pes z-indeks. Öň seredip geçen “Kesilen gurallar” ssenariýinde, gurallaryň akymyny halas etmek üçin Portal ulandym: resminamanyň korpusyna ýerleşdirip, konteýneriň içindäki triggeriň üstünde goýup, gizlin klip. Galam ssenarisine 3 serediň: Şoýombo Gabriel Aýomide tarapyndan kesilen gurallar (çözgüt). Ters täsirleri bolmazdan Stacking kontekstini hödürlemek Öňki bölümde düşündirilen ähli çemeleşmeler, problemaly stack kontekstlerinden elementleri “aýyrmaga” gönükdirilendir, ýöne hakykatdanam size zerur ýa-da berkitme kontekstini döretmek isleýän käbir ýagdaýlar bar. Täze stacking kontekstini döretmek aňsat, ýöne ähli çemeleşmeler ters täsir edýär. .Agny, izolýasiýa ulanmakdan başga: izolýasiýa. Bir element ulanylanda, şol elementiň çagalarynyň mazmuny, her bir çaga we daşarky elementleriň täsirine däl-de, şol kontekstde kesgitlenýär. Nusgawy mysal, z-indeks: -1 ýaly negatiw baha bellemekdir. Sizde .kart komponentiniň bardygyny göz öňüne getiriň. .Kartyň tekstiniň arkasynda, ýöne kartanyň fonunda ýerleşýän bezeg görnüşini goşmak isleýärsiňiz. Kartada ýerleşdirme konteksti bolmazdan, z-index: -1 şekili kök ýygnamak kontekstiniň aşagyna (tutuş sahypa) iberýär. Bu, kartoçkanyň ak fonunda ýitip gitmegine sebäp bolýar: Shoyombo Gabriel Aýomide tarapyndan ýazylan “Pen negatiw z-indeks” (mesele). Bu meseläni çözmek üçin izolýasiýa yglan edýäris: ene-atadan üzňe .card: Şoýombo Gabriel Aýomidiň “Pen Negative z-index” (çözgüdi) serediň. Indi .card elementiniň özi jemleýji kontekste öwrülýär. Haçan-da onuň çaga elementi - pseudo-elementden öň döredilen bezeg şekili z-indeks: -1 bolanda, ene-atanyň mazmunynyň iň aşaky bölegine geçýär. Tekstiň aňyrsynda we niýetlenilişi ýaly kartanyň fonunda ajaýyp oturýar. Netije Rememberadyňyzdan çykarmaň: indiki gezek z-indeksiňiz gözegçilikden çyksa, bu duzakly kontekstdir. Salgylar
Toplama konteksti (MDN) Z-indeks we stacking kontekstleri (web.dev) “CSS-de izolýasiýa emläkleri bilen täze mazmunly mazmuny nädip döretmeli”, Natali Pina “Näme, z-indeks ??”, Joş Komau
“SmashingMag” -da goşmaça okamak
“Uly taslamalarda CSS Z-indeksini dolandyrmak”, Stiwen Frieson “Ipapyk sözbaşylar we doly beýik elementler: çylşyrymly kombinasiýa”, Filip Braunen “Komponent esasly web programmasynda Z-indeksini dolandyrmak”, Pawel Pomerantsew “Z-Index CSS eýeçiligi: hemmetaraplaýyn görnüş”, Lui Lazaris
