Ezarri al duzu inoiz z-index: 99999 zure CSSko elementu batean, eta ez da beste elementu batzuen gainean ateratzen? Hain handia den balio batek elementu hori erraz jarri beharko luke bisualki beste ezeren gainean, elementu ezberdin guztiak balio baxuago batean ezarrita daudela edo batere ezarrita ez daudela suposatuz. Web-orri bat bi dimentsioko espazio batean irudikatu ohi da; hala ere, CSS propietate espezifikoak aplikatuz, z ardatzaren irudizko plano bat sartzen da sakonera helarazteko. Plano hori pantailarekiko perpendikularra da, eta bertatik, erabiltzaileak elementuen ordena hautematen du, bata bestearen gainean. Irudizko z ardatzaren atzean dagoen ideia, erabiltzaileak pilatutako elementuen pertzepzioa, hau sortzen duten CSS propietateak konbinatzen direla da pilaketa-testuinguru deitzen duguna osatzeko. Web-orri batean elementuak nola "pilatzen" diren, zerk kontrolatzen duen pilaketa-ordena eta behar denean elementuak "despilatzeko" ikuspegi praktikoei buruz hitz egingo dugu. Testuinguruak pilatzeari buruz Imajinatu zure web orria mahai gisa. HTML elementuak gehitzen dituzun heinean, paper zatiak jartzen ari zara, bata bestearen atzetik, mahai gainean. Jarritako azken papera gehitu berri den HTML elementuaren baliokidea da, eta aurretik jarritako beste paper guztien gainean jartzen da. Hau da dokumentu-fluxu arrunta, baita habiaratu diren elementuentzat ere. Mahaiak berak erro pilatzeko testuingurua adierazten du, beste karpeta guztiak dituen elementuak osatutakoa. Orain, CSS propietate zehatzak sartzen dira jokoan. Posizioa (z-indizearekin), opakutasuna, eraldatzea eta edukia bezalako propietateek karpeta bat bezala jokatzen dute. Karpeta honek elementu bat eta bere seme guztiak hartzen ditu, pila nagusitik ateratzen ditu eta azpipila bereizi batean multzokatzen ditu, pilaketa-testuinguru deitzen duguna sortuz. Kokatutako elementuei dagokienez, autoa ez den z-indizearen balio bat deklaratzen dugunean gertatzen da. Opakitatea, transformazioa eta iragazkia bezalako propietateetarako, pilaketa-testuingurua automatikoki sortzen da balio zehatzak aplikatzen direnean.
Saiatu hau ulertzen: behin paper zati bat (hau da, elementu ume bat) karpeta baten barruan dagoenean (hau da, gurasoen pilaketa-testuingurua), ezin da inoiz karpeta horretatik irten edo beste karpeta batean paperen artean jarri. Bere z-indizea bere karpeta barruan bakarrik dago garrantzitsua.
Beheko ilustrazioan, B papera B karpetaren pilaketa testuinguruan dago orain, eta karpetako beste paper batzuekin soilik eska daiteke.
Imajinatu, nahi baduzu, zure mahaian bi karpeta dituzula:
.folder-a { z-indizea: 1; } .karpeta-b { z-indizea: 2; }
Eguneratu dezagun markaketa pixka bat. Inside Folder A orri berezi bat da, z-indizea: 9999. Inside Folder B orri arrunta da, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-indizea: 5; }
Zein orrialde dago goian? B karpetako .plain-page da. Arakatzaileak haur-paperei ez die jaramonik egiten eta bi karpetak pilatzen ditu lehenik. B karpeta ikusten du (z-indizea: 2) eta A karpetaren gainean jartzen du (z-indizea: 1) badakigulako bi bat baino handiagoa dela. Bitartean, .special-page z-index: 9999 orria pilaren behealdean dago, nahiz eta bere z-indizea ahalik eta baliorik altuenean ezarri. Testuinguruak pilatzeko ere habiaratu daitezke (karpetak karpeten barruan), "genea-zuhaitza" sortuz. Printzipio bera aplikatzen da: haur batek ezin du inoiz bere gurasoen karpetatik ihes egin. Orain, pilaketa-testuinguruek geruzak taldekatzen eta berrantolatzen dituzten karpetak bezala nola jokatzen duten ulertzen duzunean, merezi du galdetzea: zergatik sortzen dituzte propietate batzuek (eraldaketa eta opakutasuna, esaterako) pilaketa-testuinguru berriak? Hona hemen gauza: propietate hauek ez dute pilaketa-testuingururik sortzen, itxuragatik; nabigatzaileak kaputxa azpian funtzionatzen duelako egiten dute. Transformazioa, opakutasuna, iragazkia edo perspektiba aplikatzen dituzunean, arakatzaileari esaten ari zara: "Aizu, elementu hau mugitu, biratu edo desager daiteke, beraz, prest!"
Propietate hauek erabiltzen dituzunean, arakatzaileak pilaketa-testuinguru berri bat sortzen du errendatzea modu eraginkorragoan kudeatzeko. Horri esker, arakatzaileak animazioak, transformazioak eta efektu bisualak modu independentean kudeatu ditzake, elementu horiek orriaren gainerakoekin nola elkarreragiten duten birkalkulatzeko beharra murriztuz. Pentsa ezazu arakatzaileak esaten duen bezala: "Karpeta hau banan-banan kudeatuko dut, beraz, ez dudan mahai osoa aldatu behar barruan zerbait aldatzen den bakoitzean". Baina badagobigarren mailako efektu bat. Arakatzaileak elementu bat bere geruzara altxatzen duenean, barruan dagoen guztia "laundu" behar du, pilaketa-testuinguru berri bat sortuz. Karpeta bat mahaitik kentzea bereizita kudeatzeko; Karpeta horren barruan dagoen guztia taldekatu egiten da, eta arakatzaileak unitate bakar gisa tratatzen du zerren gainean dagoena erabakitzeko orduan. Beraz, eraldaketa eta opakutasun propietateek elementuak bisualki pilatzeko moduari eraginik ez diotela dirudien arren, bai, eta errendimendua optimizatzeko da. Beste hainbat CSS propietateek ere pilatzeko testuinguruak sor ditzakete antzeko arrazoiengatik. MDNk zerrenda osoa eskaintzen du sakonago sakondu nahi baduzu. Badira dezente, eta horrek jakin gabe nahi gabe pilaketa-testuinguru bat sortzea zein erraza den erakusten du. "Despilatzea" arazoa Pilatze arazoak arrazoi askorengatik sor daitezke, baina batzuk besteak baino ohikoagoak dira. Osagai modalak eredu klasikoak dira, osagaia goiko geruza batean beste elementu guztien gainetik "irekitzeko" aldatzea eskatzen baitute, gero goiko geruzatik kendu "itxita" dagoenean. Nahiko ziur nago denok modu bat irekitzen dugun egoera batera iritsi garela eta, edozein dela ere, ez dela agertzen. Ez da behar bezala ireki ez zela, pilaketa-testuinguruaren beheko geruza batean ikusterik gabe dagoela baizik. Honek "nola?" ezarri duzunetik:
.gainjartzea { posizioa: finkoa; /* pilaketa testuingurua sortzen du */ z-indizea: 1; /* elementua geruza batean jartzen du beste guztiaren gainetik */ txertaketa: 0; zabalera: %100; altuera: 100vh; gainezka: ezkutuan; atzeko planoaren kolorea: #00000080; }
Honek zuzena dirudi, baina abiarazle modala duen elementu nagusia z-indizean ere ezarrita dagoen beste elementu nagusi baten barruan dagoen elementu nagusia bada, teknikoki modua karpeta nagusiak ilundutako azpigeruza batean kokatzen du. Ikus ditzagun agertoki zehatz hori eta pilaketa-testuinguruko beste pare bat hutsune. Uste dut ikusiko duzula ez bakarrik zein erraza den nahi gabe pilatzeko testuinguruak sortzea, baita haiek gaizki kudeatu ere. Gainera, kudeatutako egoera batera nola itzultzen zaren egoeraren araberakoa da. 1. eszenatokia: Harrapatutako modala
Berehala ikus dezakezu zure modala behe-mailako geruza batean harrapatuta eta gurasoa identifikatu. Arakatzailearen luzapenak Garatzaile adimendunek luzapenak eraiki dituzte laguntzeko. "CSS Stacking Context Inspector" Chrome luzapen hau bezalako tresnek z-index fitxa gehigarri bat gehitzen diote DevTools-ei, pilaketa-testuinguru bat sortzen duten elementuei buruzko informazioa erakusteko.
IDE luzapenak Arazoak ere antzeman ditzakezu garapenean zehar VS Coderako hau bezalako luzapen batekin, zure editorean pilaketa-testuinguruko arazoak zuzenean nabarmentzen dituena.
Despilatu Eta Kontrola Berreskuratu Arrazoia identifikatu ondoren, hurrengo urratsa horri aurre egitea da. Hainbat planteamendu har ditzakezu arazo honi aurre egiteko, eta ordenan zerrendatuko ditut. Edozein mailatan edonor aukeratu dezakezu, ordea; inork ezin du kexatu edo oztopatu beste bat. Aldatu HTML Egitura Hau konponketa optimotzat jotzen da. Pilatze-testuinguruaren arazo batekin topo egiteko, elementu batzuk posizio dibertigarrietan jarri behar dituzu zure HTML barruan. Orria berregituratzeak DOM birmoldatzen lagunduko dizu eta pilaketa testuinguruaren arazoa ezabatzen lagunduko dizu. Bilatu elementu problematikoa eta kendu HTML markako harrapaketa-elementutik. Esate baterako, lehen agertokia, "The Trapped Modal", ebatzi dezakegu .modal-container goiburutik ateraz eta berez
elementuan jarriz.Eduki honek 2-ko z-indizea du eta oraindik ez du modala estaliko.Goiburua
Eduki nagusia
"Ireki modala" botoian klik egiten duzunean, modala beste guztiaren aurrean kokatu behar da. Ikusi luma 1. eszenatokia: Shoyombo Gabriel Ayomide-ren Trapped Modal (soluzioa) [forked]. EgokituGurasoen pilaketa testuingurua CSS-n Zer gertatzen da elementua diseinua hautsi gabe mugitu ezin duzuna bada? Hobe da gaia jorratzea: gurasoak ezartzen du testuingurua. Aurkitu testuingurua abiarazteko ardura duen CSS propietatea (edo propietateak) eta kendu. Helburu bat badu eta ezin bada kendu, eman gurasoari bere anai-arreben elementuak baino z-indize balio handiagoa edukiontzi osoa altxatzeko. Z-indizearen balio handiagoarekin, edukiontzi nagusia goialdera mugitzen da eta bere seme-alabak erabiltzailearengandik hurbilago agertzen dira. "The Submerged Dropdown" eszenatokian ikasitakoan oinarrituta, ezin dugu goitibeherako goitibehera mugitu nabigazio barratik; ez luke zentzurik izango. Hala ere, .navbar edukiontziaren z-indizearen balioa handitu dezakegu .content elementuaren z-indizearen balioa baino handiagoa izan dadin. .navbar { atzeko planoa: #333; /* z-indizea: 1; */ z-indizea: 3; postua: erlatiboa; }
Aldaketa honekin, goitibeherako menua edukiaren aurrean agertzen da inolako arazorik gabe.
Ikusi Pen Scenario 2: The Submerged Dropdown (Solution) [forked] Shoyombo Gabriel Ayomide-ren eskutik.
Saiatu atariak, esparru bat erabiltzen baduzu
React edo Vue bezalako esparruetan, Portal bat DOM-en bere guraso hierarkia arruntetik kanpo osagai bat errendatzen uzten dizun funtzio bat da. Atariak zure osagaientzako telegarraio-gailu bat bezalakoak dira. Osagai baten HTML dokumentuaren edozein lekutan errendatzen uzten dizute (normalean, document.body sartuta), jatorrizko gurasoarekin logikoki konektatuta mantentzen duten atrezzoetarako, egoerarako eta gertaeretarako. Hau ezin hobea da pilaketa-testuinguru-tranpetatik ihes egiteko, errendatutako irteera literalki arazo nagusiaren edukiontzitik kanpo agertzen baita.
ReactDOM.createPortal(
Horrek bermatzen du goitibeherako edukia ez dagoela gurasoaren atzean ezkutatuta, gurasoak gainezka egin badu ere: ezkutuan edo z-indize baxuago bat. Lehen aztertu dugun "The Clipped Tooltip" eszenatokian, Atari bat erabili nuen tresna-informazioa gainezkatzetik erreskatatzeko: ezkutuko klipa dokumentuaren gorputzean jarriz eta edukiontzi barruan abiaraztearen gainean kokatuz. Ikusi luma 3. eszenatokia: Shoyombo Gabriel Ayomide-ren Ebakitako tresna-informazioa (soluzioa) [sardexkatua]. Bigarren mailako efekturik gabe pilatzeko testuingurua aurkezten Aurreko atalean azaldutako planteamendu guztiak pilaketa-testuinguru problematikoetatik elementuak "despilatzea" dute helburu, baina badaude egoera batzuk benetan pilatzeko testuinguru bat sortu behar duzun edo sortu nahi duzun. Pilatze-testuinguru berri bat sortzea erraza da, baina planteamendu guztiek albo-efektu bat dute. Hau da, isolamendua erabiltzeaz ezik: isolatu. Elementu bati aplikatzen zaionean, elementu horren seme-alaben pilaketa-testuingurua haur bakoitzari dagokionez eta testuinguru horren barruan zehazten da, hortik kanpoko elementuek eragin beharrean. Adibide klasiko bat elementu horri balio negatiboa esleitzea da, esate baterako, z-indizea: -1. Imajinatu .card osagai bat duzula. Txartelaren testuaren atzean dagoen forma apaingarri bat gehitu nahi duzu, baina txartelaren atzeko planoaren gainean. Txartelean pilaketa-testuingururik gabe, z-index: -1-ek forma erroko pilaketa-testuinguruaren behealdera bidaltzen du (orri osoa). Honek .card-aren hondo zuriaren atzean desagertzen da: Ikus Shoyombo Gabriel Ayomide-ren Pen Negative z-indizea (arazoa) [forked]. Hau konpontzeko, isolamendua deklaratzen dugu: isolatu .card gurasoaren gainean: Ikus Shoyombo Gabriel Ayomide-ren Pen Negative z-index (soluzioa) [forked]-a. Orain, .card elementua bera pilatzeko testuinguru bihurtzen da. Bere elementu semea - :before sasi-elementuan sortutako dekorazio forma - z-indizea: -1 duenean, gurasoen pilaketa-testuinguruaren behealdera doa. Primeran kokatzen da testuaren atzean eta txartelaren atzeko planoaren gainean, nahi bezala. Ondorioa Gogoratu: zure z-indizea kontroletik kanpo dagoela dirudien hurrengoan, harrapatuta dagoen pilaketa-testuinguru bat da. Erreferentziak
Pilatzeko testuingurua (MDN) Z-index eta pilaketa testuinguruak (web.dev) "Nola sortu pilaketa-testuinguru berri bat CSS-en isolamendu-propietatearekin", Natalie Pina "Zer demontre, z-index?", Josh Comeau
Irakurketa gehiago SmashingMag-en
"CSS Z-Index kudeatzea proiektu handietan", Steven Frieson "Goiburu itsaskorrak eta altuera osoko elementuak: konbinazio delikatua", Philip Braunen "Z-indizea kudeatzea osagaietan oinarritutako web aplikazio batean", Pavel Pomerantsev "Z-Index CSS jabetza: Begirada integrala", Louis Lazaris
