¿Hayk’aqllapas z-index: 99999 huk elemento CSS kaqpi churarqankichu, chaymanta mana wak elementokuna pataman lluqsinchu? Chayna hatun chaniqa chay elementota rikuylla imapa hawanpi churanan tiyan, llapa chikan elementokuna aswan pisi chanipi churasqa kasqankuta utaq mana llapanpi churasqa kasqankuta hapispa. Huk web p'anqaqa iskay dimensional espaciopi rikuchikun; ichaqa, CSS nisqa propiedades específicas nisqakunata churaspa, huk imaginario plano eje z nisqa riqsichikun ukhunta apachinapaq. Kay planoqa pantallaman perpendicularmi, chaymantam, usuarioqa elementokunapa ordenninta qawan, huknin hukninpa hawanpi. Yuyayniyuq z-eje kaqmanta yuyay, ruwaqpa qhawaynin pilasqa elementokunamanta, chayta ruwaq CSS propiedades hukllanakunku imatachus apilamiento contexto sutichanchik chayta ruwanankupaq. Rimasunchik imayna elementokuna “pillasqa” kanku huk web kitipi, imakuna apilamiento ordenta kamachin, chaymanta ruwaypaq enfoques “unstack” elementokuna necesitakuqtin. Contextos Apilamiento nisqamanta Web paginaykipi huk escritorio hina yuyaykuy. HTML elementokunata yapasqaykiman hina, raphikunata churashanki, hukmanta hukmanta, mesa patapi. Qhipa kaq raphi churasqaqa aswan qhipa yapasqa HTML elementowan kikinmi, chaymanta ñawpaqninpi churasqa llapa wak raphikunap hawanpi tiyakun. Kayqa normal qillqa puriyninmi, anidado elementokunapaqpas. Kikin mesaqa saphi pila contexto nisqatam rikuchin, elementowan ruwasqa, chaypim llapa huk qillqana mayt'ukuna kachkan. Kunanqa, CSS propiedades específicas nisqakuna pukllayman hamun. Posición (z-index kaqwan), opacidad, tikray, chaymanta hap'iy hina propiedades huk qillqana mayt'u hina llamk'anku. Kay qillqana mayt'u huk elementota chaymanta llapa wawankunata hap'in, hatun pilamanta hurqun, chaymanta huk sapaq sub-pila kaqpi huñun, chaymanta pila contexto nisqayku ruwan. Posicionado elementokunapaq, kayqa ruwakun huk z-índice chanin mana automanta willaptinchik. Opacidad, tikray chaymanta filtro hina propiedades kaqpaq, pila contexto kikinmanta ruwasqa mayk'aq sapanchasqa chanikuna churasqa.
Kayta hamut’ayta kallpachakuy: Huk kuti huk raphi (i.e., huk wawa elemento) huk carpeta ukhupi kaptin (i.e., tayta mamapa pila contexton), mana hayk’aqpas chay carpetamanta lluqsiyta atinchu utaq huk carpeta kaqpi raphikunapura churasqa kanman. Paypa z-index kunanqa kikin carpeta ukhupilla relevante kachkan.
Uraypi siq'ipi, B Papel kunan B Carpeta kaqpa apilamiento contexton ukhupi kachkan, chaymanta carpetapi wak raphikunawanlla kamachiyta atikun.
Piensariy, munaspaykiqa, iskay carpetakuna escritorioykipi kasqanpi:
.carpeta-a { z-index: 1; } . .carpeta-b { z-index: 2; } .
Chay marcata huk chhikanta musuqyachisun. A Carpeta ukhupiqa huk especial p'anqa, z-index: 9999. B Carpeta ukhupi huk llañu p'anqa, z-index: 5.
.especial-p'anqa { z-index: 9999; } . .llano-p'anqa { z-index: 5; } .
¿Mayqin p’anqataq patapi kachkan? Chayqa .llano-p’anqa kachkan Carpeta B. Navegador mana qhawanchu wawa papelkunata chaymanta iskay carpetakunata ñawpaqta pilan. B Carpeta (z-índice: 2) nisqata rikuspan A Carpeta (z-índice: 1) nisqa pataman churan, iskay hukmanta aswan hatun kasqanmanta yachasqanchisrayku. Chaykama, .special-page z-index: 9999 p'anqaqa pilap urayninpi kachkan, z-indexnin aswan hatun atikuq chaniman churasqa kaptinpas. Apilamiento contextokuna nest nisqapas kanman (carpetakuna ukhupi carpetakuna), huk “ayllu sach’a” ruwaspa. Chay hinallataqmi: wawaqa manan hayk’aqpas tayta-mamanpa carpetanmanta ayqeyta atinmanchu. Kunan imayna pila contextokuna ruwaq carpetakuna hina ruwanku chaymanta qatanakunata huñunku chaymanta wakmanta kamachinku chayta tarinki, tapuyqa allinmi: imarayku wakin propiedades — tikray hina chaymanta opacidad hina — musuq pila contextokuna ruwanku? Kaypi kachkan: kay propiedades mana apilamiento contextokunata ruwankuchu imayna rikch’akusqankurayku; chayta ruwanku imaynatachus navegador capucha uranpi llamk’asqanrayku. Transformación, opacidad, filtro utaq perspectiva churaptiyki, navegadorman nichkanki: “Hey, kay elemento kuyunman, muyunman utaq chinkanman, chayrayku listo kay!”
Kay propiedades kaqwan llamk'achkanki, maskaq musuq pila contexto ruwan aswan allin ruwayta kamachinapaq. Kayqa maskaqman kawsachiykunata, tikraykunata chaymanta rikuy efectos nisqakunata sapallanmanta ruwayta saqin, pisiyachispa imayna kay elementokuna puchuq p'anqawan tinkinku chayta wakmanta yupayta. Yuyaykuy chayta navegador nisqan hina: “Kay carpetata sapanmanta hap’isaq, chhaynapin mana llapa mesata cambianaychu sapa kuti ukhupi imapas cambiaqtin”, nispa. Ichaqa kanmihuk efecto secundario nisqa. Huk kuti maskaq huk elementota kikin qatanman hoqarin, tukuy ima ukhupi “aplana” ruwanan tiyan, musuq apilamiento contextota ruwaspa. Chayqa huk carpetata escritoriomanta horqoy hinan, sapaqmanta hap’inapaq; tukuy chay carpeta ukhupi huñusqa kanku, chaymanta maskaq kunan huk unidad hina qhawan imachus ima patapi tiyakun chayta tanteaspa. Chaymi tikray chaymanta opacidad propiedades mana rikhurinmanchu imayna elementokuna rikuypi pilakunku chayta afectan chaypas, ruwanku, chaymanta ruway allinchaypaq. Askha wak CSS kaqninkunapas chayhina razonkunarayku pila contextokuna ruwayta atinku. MDN huk hunt'asqa lista qun sichus aswan ukhuta allayta munanki. Askhalla kanku, chaylla rikuchin imayna facil kasqanmanta mana musyaylla huk apilamiento contexto mana yachaspa ruway. “Desapilamiento” nisqa Sasachakuy Apilamiento nisqamanta sasachakuykunaqa achka razonkunaraykum rikurimunman, ichaqa wakinqa aswan achkam wakinmantaqa. Componentes modal nisqakunaqa huk patrón clásico nisqa kanku, imaraykuchus componente nisqa “kicharinanpaq” huk pata qatapi llapa elementokunamanta aswan pataman tikrayta munanku, chaymanta “wichqasqa” kaptin hawa qatamanta hurquna. Yaqa confianzayoqmi kani llapanchis huk situacionman phawasqanchismanta, chaypin huk modalta kicharinchis, imaraykupas, manan rikhurinchu. Manan mana allintachu kicharikusqanraykuchu, aswanpas mana rikuy atiymi huk uray qatapi apilamiento contextopi. Kayqa saqisunkichik tapukunaykipaq “imaynataq?” churasqaykimanta pacha:
.qatasqa { . posición: takyasqa; /* apilamiento contextota paqarichimun */ . z-index: 1; /* tukuy imamanta aswan pataman huk qatapi elementota churan */ inserto: 0; ancho: 100%; sayaynin: 100vh; desbordamiento: pakasqa; qhipa-llimp'i: #00000080; } .
Kayqa allin rikch’akun, ichaqa sichus tayta elemento modal gatilloyuq huk wawa elemento huk tayta elemento ukhupi chaymanta z-index kaqman churasqataq: 1, chay técnicamente modalta huk subcapa kaqpi churan hatun carpetawan tutayachisqa. Chay escenario específico kaqmanta chaymanta huk iskay kimsa huk común apilamiento-contexto trampas kaqmanta qhawasun. Yuyaykuni mana imayna facilchu mana yuyaypi apilamiento contextokuna ruwayllachu rikunki, aswanpas imayna mana allinta kamachiyta. Hinallataq, imayna kutimunki huk estado gestionado kaqman, situacionmanta kanqa. Escenario 1: Modal Trampado nisqa
Chaylla rikunki modalniyki huk pisi pata qatapi hap'isqa kaqta chaymanta tayta mamata riqsichiyta atikunki. Navegador Extensiones nisqakuna Smart paqarichiqkuna yanapanapaq mast'ariykunata ruwarqanku. Kayhina yanapakuykuna “CSS Apilamiento Contexto Inspector” Chrome mast’ariy huk yapasqa z-index tabla DevTools kaqniykiman yapanku willayta elementokunamanta rikuchinaykipaq mayqinkunachus huk apilamiento contexto ruwanku.
IDE Mast'ariykuna Aswanpas wiñachiy pachapi sasachakuykunata rikuyta atikunki kayhina mast'ariywan VS Código kaqpaq, mayqinchus atikuq pila contexto sasachakuykunata chiqamanta editorniykipi resaltan.
Despilado Y Recuperar Control Saphi kayninta riqsiruspaykuqa, qatiqnin ruwayqa chayta atipaymi. Kay sasachakuy allichanapaqqa kanmi askha ruwaykuna, chaykunatan ordenpi churasaq. Ichaqa mayqen nivelpipas pitapas akllakuwaqmi; mana pipas hukta quejakuyta nitaq hark’ayta atinchu. HTML Estructura nisqa tikray Kaymi allin allichay hina qhawarisqa. Huk apilamiento contexto sasachakuywan purinaykipaq, wakin elementokunata HTML kaqniyki ukhupi asichikuq posiciónkunapi churarqanki. P'anqata musuqmanta ruwayqa yanapasunki DOM musuqmanta ruwayta chaymanta apilamiento contexto sasachakuy chinkachiyta. Sasachakuy elementota maskay hinaspa HTML markapi trampa elementomanta hurquy. Ejemplopaq, ñawpaq kaq escenariota allichayta atisunman, “The Trapped Modal”, .modal-contenedorta umalliqmanta hawaman kuyuchispa, chaymanta sapallan
elementopi churaspa.Kay contenidoqa 2 z-index nisqayuqmi, kunankamapas manam modal nisqataqa qatanqachu.Umalliq
nisqa
Hatun Willakuy
Título Modal
nisqaKunanqa, mana ima qhipapichu kachkani. DOM musuqmanta ruwasqa kasqanraykum aswan allin llamkayta tariruni.
“Modal kichay” ñit’ispaykiqa, modalqa tukuy imaq ñawpaqenpin churasqa kashan imaynachus kanan hina. Qaway Escenario de Pluma 1: El Modal Trampado (Solución) [forked] Shoyombo Gabriel Ayomidepa ruwasqan. Ajustar LaTayta-mama Apilamiento Contexto En CSS ¿Imataq kanman elemento mana kuyuchiyta atisqayki mana churayta p’akispa? Aswan allinmi chay ch’aqwayta allichay: tayta mamaqa contexto nisqatan takyachin. CSS kaqninta (utaq kaqninkunata) tariy, contexto llamk'achiyta llamk'achinanpaq chaymanta hurquy. Sichus huk propósitoyuq, manataq hurquyta atikunmanchu, tayta mamaman aswan hatun z-index chaniyuqta quy wawqin elementonkunamanta llapan waqaychanata hoqarinanpaq. Aswan hatun z-index chaniwan, tayta waqaychana pataman kuyun, chaymanta wawankuna aswan qaylla ruwaqman rikukunku. “The Submerged Dropdown” nisqa escenario nisqapi yachasqaykuman hinaqa, manan navbar nisqamanta urayman kuyuchiyta atiykuchu; manataqmi imapaqpas valenmanchu. Ichaqa, .navbar waqaychanapa z-index chaninninta yapayta atiykuman, .content elementopa z-index chaninmanta aswan hatun kananpaq. .navbar { . qhipa pacha: #333; /* z-index: 1; */ z-index: 3; posición: ayllu; } .
Kay tikraywan, .dropdown-menu kunan rikurin ñawpaqninpi mana ima sasachakuyniyuq.
Qaway Escenario de Pluma 2: La Dropdown (Solución) [forked] nisqa Shoyombo Gabriel Ayomidepa ruwasqan.
Portales nisqakunata prueba, Sichus Huk Marcota llamk'achkanki
React utaq Vue hina marcokunapi, huk Portal huk ruwana kan mayqinchus huk componenteta ruwayta saqin hawa normal tayta jerarquía kaqninmanta DOM kaqpi. Portales nisqakunaqa componenteykikunapaq teletransportación nisqa aparato hinam. Paykuna huk componente HTML maypipas qillqapi ruwayta saqinku (tipicom derecho document.body kaqpi) chaymanta lógicamente tinkisqa ñawpaq tayta-mamanwan props kaqpaq, estado kaqpaq chaymanta ruwaykunapaq. Kayqa allinmi ayqinapaq apilamiento contexto trampakunamanta chaymanta ruwasqa lluqsiy literalmente hawa sasachakuyniyuq tayta waqaychanamanta rikurin.
ReactDOM.kamachiyPortal( .
Kayqa urayk’aq willakuyniyki mana tayta-mamanpa qhipanpi pakasqa kaqta qhawan, tayta-mama hunt’aykusqa kaptinpas: pakasqa utaq aswan pisi z-index kaqwan. Ñawpaqta qhawasqayku “The Clipped Tooltip” nisqa escenariopi, huk Portal nisqawan yanapachikurqani chay desbordamiento nisqamanta qispichinaypaq: pakasqa clip nisqa qillqap kurkunpi churaspa chaymanta waqaychana ukhupi gatillo patapi churaspa. Qaway Escenario de Pluma 3: Chay Recortado Herramientapa puntan (Solución) [forked] Shoyombo Gabriel Ayomidepa ruwasqan. Contexto de Apilamiento Mana Efectos Secundarios nisqawan riqsichiy Llapan enfoques ñawpaq t’aqapi sut’inchasqa kanku “despicking” elementokuna sasachakuyniyuq apilamiento contextokunamanta, ichaqa wakin situacionkuna kanku maypi chiqamanta necesitanki utaq munanki ruwayta huk apilamiento contexto. Musuq apilamiento contexto ruwayqa facilmi, ichaqa llapa enfoquekuna huk efecto secundariowan hamunku. Chayqa, mana sapanchasqa kayta llamk’achispa: t’aqay. Huk elementoman churasqa kaqtinqa, chay elementoq wawankunaq apilamiento contextonqa sapa wawawan tupaqmi, chay contexto ukhupipas determinakun, manan hawa elementokunaq influenciasqanchu. Huk klasiku rikch'anaqa chay elementoman mana allin chaniyuqta quchkan, ahinataq z-index: -1. Piensariy .tarjeta componenteyuq kasqaykita. Huk sumaqchasqa rikch’ayta yapayta munanki, chaytaq .tarjeta qillqap qhipanpi tiyakun, ichaqa tarjetap qhipanpi. Tarjetapi mana pila contextoyuq kaptin, z-index: -1 rikchata saphi pila contextopa urayninman (tukuy p'anqa) kachan. Kayqa .tarjeta yuraq qhipanpi chinkapun: Qaway Pen Negative z-index (sasachakuy) [forked] Shoyombo Gabriel Ayomide sutiyuq runap rurasqan. Kayta allichanapaq, sapanchasqa kayta willayku: t'aqakuy tayta mama .tarjetapi: Qaway Pen Negative z-index (solución) [forked] nisqa Shoyombo Gabriel Ayomide sutiyuq runap rurasqan. Kunanqa, kikin .card elemento huk apilamiento contextoman tukun. Wawa elementon — :manaraq pseudo-elementopi ruwasqa sumaqchasqa rikcha — z-índice: -1 kaqwan kaptin, tayta mamapa pila contextonpa ancha urayninman rin. Chayqa allintan tiyashan qelqaq qhepanpi, tarjetaq qhepanpa hawanpipas, yuyaykusqanman hina. Tukuchina Yuyariy: qatiq kutipi z-índiceyki mana kamachiyniyuq hina, huk hap’isqa apilamiento contexto. Referenciakuna
Contexto de apilamiento (MDN) nisqa. Z-index chaymanta apilamiento contextokuna (web.dev) . “Imaynatataq musuq Apilamiento Contexto ruwayta CSS kaqpi Sapanchasqa Propiedad kaqwan”, Natalie Pina “¿Imataq chay, z-índice??”, Josh Comeau
Astawan Ñawinchay SmashingMag nisqapi
“CSS Z-Índice nisqa hatun llamkaykunapi kamachiy”, Steven Frieson “Umakuna k’aspikuna hinallataq elementokuna hunt’asqa sayayniyuq: Huk Tricky Combinación”, Philip Braunen “Z-Índice kamachiy huk Componente-Based Web Aplicación kaqpi”, Pavel Pomerantsev “Z-Index CSS propiedad: Huk tukuypaq qhaway”, Louis Lazaris
