Ua hoʻonoho paha ʻoe i ka z-index: 99999 ma kahi mea i kāu CSS, a ʻaʻole ia e puka ma luna o nā mea ʻē aʻe? ʻO kahi waiwai nui e kau maʻalahi i kēlā mea i ʻike ʻia ma luna o kekahi mea ʻē aʻe, me ka manaʻo ua hoʻonohonoho ʻia nā mea ʻokoʻa a pau ma kahi waiwai haʻahaʻa a ʻaʻole i hoʻonohonoho ʻia. Hōʻike pinepine ʻia kahi ʻaoʻao pūnaewele ma kahi ākea ʻelua; akā naʻe, ma ka hoʻohana ʻana i nā waiwai CSS kikoʻī, ua hoʻokomo ʻia kahi mokulele z-axis noʻonoʻo e hōʻike i ka hohonu. Kū pololei kēia mokulele i ka pale, a mai ia mea, ʻike ka mea hoʻohana i ke ʻano o nā mea, kekahi ma luna o kekahi. ʻO ka manaʻo ma hope o ka z-axis noʻonoʻo, ka manaʻo o ka mea hoʻohana i nā mea i hoʻopaʻa ʻia, ʻo ia nā waiwai CSS e hana ai i hui pū ʻia e hana i ka mea a mākou i kapa ai he ʻano hoʻonohonoho. E kamaʻilio mākou e pili ana i ka "hoʻopaʻa ʻia" o nā mea ma kahi ʻaoʻao pūnaewele, ka mea e hoʻomalu ai i ka hoʻonohonoho ʻana, a me nā ala kūpono e "unstack" i nā mea i ka wā e pono ai. E pili ana i ka hoʻopaʻa ʻana i nā ʻatikala E noʻonoʻo i kāu ʻaoʻao pūnaewele ma ke ʻano he pākaukau. Ke hoʻohui nei ʻoe i nā mea HTML, ke kau nei ʻoe i nā ʻāpana pepa, ma hope o kekahi, ma ka pākaukau. ʻO ka ʻāpana hope o ka pepa i kau ʻia ua like ia me ka mea HTML hou loa i hoʻohui ʻia, a aia ma luna o nā pepa ʻē aʻe a pau i kau ʻia ma mua. ʻO kēia ke kahe palapala maʻamau, ʻoiai no nā mea i hoʻopaʻa ʻia. Hōʻike ka pākaukau i ka pōʻaiapili hoʻopaʻa kumu, i hana ʻia e ka element, aia nā waihona ʻē aʻe a pau. I kēia manawa, komo nā waiwai CSS kikoʻī. ʻO nā waiwai e like me ke kūlana (me ka z-index), ka opacity, ka hoʻololi, a me ka loaʻa ʻana) e like me kahi waihona. Lawe kēia waihona i kahi mea a me kāna mau keiki a pau, unuhi iā lākou mai ka waihona nui, a hui pū iā lākou i kahi sub-stack kaʻawale, e hana ana i ka mea a mākou i kapa ai he pōʻaiapili hoʻopaʻa. No nā mea i hoʻonohonoho ʻia, hiki kēia i ka wā e haʻi aku ai mākou i kahi waiwai z-index ma waho o ka auto. No nā waiwai e like me ka opacity, ka hoʻololi ʻana, a me ka kānana, hana ʻia ka pōʻaiapili hoʻopaʻa i ka wā e hoʻohana ʻia ai nā waiwai kikoʻī.
E ho'āʻo e hoʻomaopopo i kēia: Aia kahi ʻāpana pepa (ʻo ia hoʻi, kahi mea keiki) i loko o kahi waihona (ʻo ia hoʻi, ka pōʻaiapili o ka makua), ʻaʻole hiki iā ia ke haʻalele i kēlā waihona a waiho ʻia ma waena o nā pepa ma kahi waihona ʻokoʻa. Ua pili wale kāna z-index i loko o kāna waihona ponoʻī.
Ma ke kiʻi ma lalo nei, aia ka Pepa B i loko o ka pōʻaiapili hoʻopaʻa ʻana o ka Kōpena B, a hiki ke kauoha ʻia me nā pepa ʻē aʻe i loko o ka waihona.
E noʻonoʻo, inā makemake ʻoe, aia ʻelua mau waihona ma kāu pākaukau:
.palapala-a { z-index: 1; } .palapala-b { z-index: 2; }
E hoʻohou hou i ka markup. He ʻaoʻao kūikawā i loko o ka waihona A, z-index: 9999. ʻO loko o ka Kōpena B he ʻaoʻao maʻalahi, z-index: 5.
.ʻaoʻao kūikawā { z-index: 9999; } .palapala-palapala { z-index: 5; }
ʻO ka ʻaoʻao hea ma luna? ʻO ia ka .plain-page ma ka Kōpena B. Hoʻokuʻu ka polokalamu kele pūnaewele i nā pepa keiki a hoʻopaʻa mua i nā waihona ʻelua. ʻIke ʻo ia i ka waihona B (z-index: 2) a kau iā ia ma luna o ka waihona A (z-index: 1) no ka mea ʻike mākou he ʻoi aku ʻelua ma mua o hoʻokahi. I kēia manawa, ʻo ka .special-page i hoʻonohonoho ʻia i ka z-index: 9999 ʻaoʻao ma lalo o ka waihona ʻoiai ua hoʻonohonoho ʻia kāna z-index i ka waiwai kiʻekiʻe loa. Hiki ke hoʻopaʻa ʻia i nā pōʻaiapili (nā waihona i loko o nā waihona), e hana ana i "lāʻau ʻohana." Pili ka loina like: ʻaʻole hiki i ke keiki ke pakele i ka waihona o kona mau mākua. I kēia manawa ke ʻike nei ʻoe i ka hana ʻana o nā pōʻaiapili e like me nā waihona e hui a hoʻonohonoho hou i nā papa, pono e nīnau: no ke aha i hana ai kekahi mau waiwai - e like me ka hoʻololi a me ka opacity - e hana i nā pōʻaiapili hou? Eia ka mea: ʻaʻole hana kēia mau waiwai i nā pōʻaiapili hoʻopaʻa ʻia ma muli o ke ʻano o ko lākou nānā ʻana; hana lākou ma muli o ka hana ʻana o ka polokalamu kele pūnaewele ma lalo o ka puʻupuʻu. Ke hoʻohana nei ʻoe i ka hoʻololi, opacity, kānana, a i ʻole ke kuanaʻike, ke haʻi nei ʻoe i ka polokalamu kele pūnaewele, "ʻAe, hiki ke neʻe, ʻōwili, a mae paha kēia mea, no laila e mākaukau!"
Ke hoʻohana ʻoe i kēia mau waiwai, hana ka polokalamu kele pūnaewele i kahi pōʻaiapili hoʻonohonoho hou e hoʻokele pono ai i ka hoʻolilo ʻana. ʻO kēia ka mea e hiki ai i ka polokalamu kele pūnaewele ke lawelawe i nā animation, hoʻololi, a me nā hopena ʻike kūʻokoʻa, e hōʻemi ana i ka pono e helu hou i ka pili ʻana o kēia mau mea me ke koena o ka ʻaoʻao. E noʻonoʻo ʻoe e like me ka ʻōlelo ʻana a ka polokalamu kele pūnaewele, "E mālama kaʻawale wau i kēia waihona no laila ʻaʻole pono wau e hoʻololi hou i ka pākaukau holoʻokoʻa i kēlā me kēia manawa e loli ai kekahi mea i loko." Akā aiahe hopena ʻaoʻao. Ke hoʻokiʻekiʻe ka polokalamu kele i kahi mea i loko o kāna papa ponoʻī, pono ia e "palapala" i nā mea āpau i loko, e hana i kahi pōʻaiapili hou. Ua like ia me ka lawe ʻana i kahi waihona mai ka pākaukau e mālama kaʻawale; ʻO nā mea a pau i loko o kēlā waihona e hui pū ʻia, a ke mālama nei ka polokalamu kele pūnaewele iā ia ma ke ʻano he hoʻokahi i ka wā e hoʻoholo ai i ka mea e noho ana ma luna o ka mea. No laila ʻoiai ʻaʻole ʻike ʻia ka hoʻololi ʻana a me ka opacity i ke ʻano o ka hoʻopaʻa ʻana o nā mea i ka ʻike maka, hana lākou, a no ka hoʻomaikaʻi ʻana i ka hana. Hiki i kekahi mau waiwai CSS ke hana i nā pōʻaiapili hoʻopaʻa no nā kumu like. Hāʻawi ʻo MDN i kahi papa inoa piha inā makemake ʻoe e ʻeli hohonu. He kakaikahi wale nō, e hōʻike ana i ka maʻalahi o ka hana ʻole ʻana i kahi pōʻaiapili hoʻopaʻa me ka ʻike ʻole. ʻO ka pilikia "Unstacking". Hiki ke kū mai nā pilikia stacking no nā kumu he nui, akā ʻoi aku ka maʻamau o kekahi ma mua o nā mea ʻē aʻe. He kumu maʻamau nā ʻāpana kumu no ka mea pono lākou e hoʻohuli i ka ʻāpana e "wehe" ma kahi papa luna ma luna o nā mea ʻē aʻe a pau, a laila e wehe iā ia mai ka papa luna ke "pani ʻia." Manaʻo wau ua holo mākou a pau i kahi kūlana kahi e wehe ai mākou i kahi modal a, no kēlā me kēia kumu, ʻaʻole i ʻike ʻia. ʻAʻole ia ʻaʻole ia i wehe pono, akā ʻaʻole ia i ʻike ʻia ma kahi papa haʻahaʻa o ka pōʻaiapili hoʻonohonoho. Hāʻawi kēia iā ʻoe e noʻonoʻo "pehea mai?" mai kou hoonoho ana:
. uhi { kūlana: paʻa; /* hana i ka pōʻaiapili hoʻonohonoho */ huahelu-z: 1; /* kau i ka mea ma kahi papa ma luna o nā mea a pau */ hookomo: 0; laula: 100%; kiekie: 100vh; kahe nui: huna; kala-kala: #00000080; }
Ua pololei kēia, akā inā ʻo ka mea makua i loko o ka modal trigger he ʻano keiki i loko o kahi mea makua ʻē aʻe i hoʻonohonoho pū ʻia i ka z-index: 1, e hoʻokomo i ka modal i loko o kahi sublayer i uhi ʻia e ka waihona nui. E nānā kākou i kēlā hiʻohiʻona kikoʻī a me nā lua o nā pitfalls stacking-context maʻamau. Manaʻo wau ʻaʻole ʻoe e ʻike wale i ka maʻalahi o ka hana ʻole ʻana i nā pōʻaiapili hoʻopaʻa ʻana, akā pehea hoʻi e hoʻokele hewa ai iā lākou. Eia kekahi, pehea ʻoe e hoʻi ai i kahi mokuʻāina mālama ʻia e pili ana i ke kūlana. Nānā 1: ʻO ka Modal Trapped
Hiki iā ʻoe ke ʻike koke i kāu modal i paʻa i kahi papa haʻahaʻa a ʻike i ka makua. Nā mea hoʻonui pūnaewele Ua kūkulu nā mea hoʻomohala akamai i nā mea hoʻonui e kōkua. ʻO nā mea hana e like me kēia "CSS Stacking Context Inspector" hoʻonui ʻia ʻo Chrome e hoʻohui i kahi pā z-index hou i kāu DevTools e hōʻike iā ʻoe i ka ʻike e pili ana i nā mea e hana i kahi pōʻaiapili.
Hoʻonui IDE Hiki iā ʻoe ke ʻike i nā pilikia i ka wā o ka hoʻomohala ʻana me kahi hoʻonui e like me kēia no VS Code, e hōʻike ana i nā pilikia pili i ka hoʻopili pololei ʻana i kāu mea hoʻoponopono.
Wehe a loaa hou ka mana Ma hope o ko mākou ʻike ʻana i ke kumu kumu, ʻo ka hana aʻe e hoʻoponopono ai. Nui nā ala e hiki ai iā ʻoe ke hana no ka hoʻoponopono ʻana i kēia pilikia, a e papa inoa wau iā lākou ma ke ʻano. Hiki iā ʻoe ke koho i kekahi ma kēlā me kēia pae, ʻoiai; ʻaʻole hiki i kekahi ke hoʻopiʻi a keʻakeʻa i kekahi. Hoʻololi i ke ʻano HTML Manaʻo ʻia kēia ka hoʻoponopono maikaʻi loa. No ka holo ʻana i kahi pilikia pōʻaiapili hoʻopaʻa ʻia, pono ʻoe i kau i kekahi mau mea i nā kūlana ʻakaʻaka i loko o kāu HTML. ʻO ka hoʻonohonoho hou ʻana i ka ʻaoʻao e kōkua iā ʻoe e hoʻololi hou i ka DOM a hoʻopau i ka pilikia pōʻaiapili. E ʻimi i ka mea pilikia a hoʻoneʻe iā ia mai ka mea pahele i ka markup HTML. No ka laʻana, hiki iā mākou ke hoʻoponopono i ka hiʻohiʻona mua, "The Trapped Modal," ma ka hoʻoneʻe ʻana i ka .modal-container mai ke poʻo a hoʻokomo iā ia i loko o ka element
.He 2 huahelu z kēia maʻiʻo a ʻaʻole naʻe e uhi i ke ʻano.Ke poʻo
Maʻiʻo Nui
Ke kaomi nei ʻoe i ka pihi "Open Modal", ua hoʻonohonoho ʻia ka modal i mua o nā mea āpau e like me ka mea i manaʻo ʻia. E nānā i ka Pen Scenario 1: The Trapped Modal (Solution) [forked] by Shoyombo Gabriel Ayomide. Hoʻoponopono i kaMākua hoʻopaʻa ʻōlelo ma CSS He aha inā ʻaʻole hiki iā ʻoe ke neʻe me ka haki ʻole o ka hoʻolālā? ʻOi aku ka maikaʻi o ka hoʻoponopono ʻana i ka pilikia: hoʻokumu ka makua i ka pōʻaiapili. E ʻimi i ka waiwai CSS (a i ʻole nā waiwai) kuleana no ka hoʻomaka ʻana i ka pōʻaiapili a wehe iā ia. Inā he kumu kona a ʻaʻole hiki ke hoʻoneʻe ʻia, e hāʻawi i ka makua i ka waiwai z-index kiʻekiʻe aʻe ma mua o kona mau kaikaina e hāpai i ka pahu holoʻokoʻa. Me ka waiwai z-index kiʻekiʻe, neʻe ka ipu makua i luna, a ʻike ʻia kāna mau keiki kokoke i ka mea hoʻohana. Ma muli o ka mea a mākou i aʻo ai i ke ʻano "The Submerged Dropdown", ʻaʻole hiki iā mākou ke hoʻoneʻe i ka hāʻule iho i waho o ka navbar; ʻaʻole kūpono. Eia naʻe, hiki iā mākou ke hoʻonui i ka waiwai z-index o ka pahu .navbar i ʻoi aku ka nui ma mua o ka waiwai z-index o ka .content element. .navbar { hope: #333; /* huahelu-z: 1; */ huahelu-z: 3; kūlana: pili; }
Me kēia hoʻololi, ʻike ʻia ka .dropdown-menu i mua o ka ʻike me ka pilikia ʻole.
E nānā i ka Pen Scenario 2: The Submerged Dropdown (Solution) [forked] na Shoyombo Gabriel Ayomide.
E ho'āʻo i nā Portals, inā e hoʻohana ana i kahi Framework
Ma nā papa hana e like me React a i ʻole Vue, ʻo ka Portal kahi hiʻohiʻona e hiki ai iā ʻoe ke hāʻawi i kahi ʻāpana ma waho o kāna hierarchy makua maʻamau i ka DOM. ʻO nā ʻīpuka e like me kahi mea teleportation no kāu mau ʻāpana. Hāʻawi lākou iā ʻoe e hāʻawi i ka HTML o kahi mea ma nā wahi āpau o ka palapala (maʻamau i loko o ka document.body) ʻoiai e hoʻopili pono ana i kona makua kumu no nā props, state, a me nā hanana. He kūpono kēia no ka pakele ʻana i ka hoʻopaʻa ʻana i nā pahele pōʻaiapili mai ka mea i ʻike maoli ʻia ka mea i hoʻopuka ʻia ma waho o ka pahu makua pilikia.
ReactDOM.createPortal(
ʻO kēia ka mea e hōʻoiaʻiʻo ʻaʻole hūnā ʻia kāu ʻike i lalo ma hope o kona makua, ʻoiai inā ua piha ka makua: huna a i ʻole ka z-index haʻahaʻa. Ma ka hiʻohiʻona "The Clipped Tooltip" a mākou i nānā ai ma mua, ua hoʻohana au i kahi Portal e hoʻopakele i ka mea hana mai ka hoʻoheheʻe: huna ʻia ma ke kau ʻana i loko o ke kino palapala a hoʻonoho iā ia ma luna o ke kumu i loko o ka ipu. E nānā i ka Pen Scenario 3: The Clipped Tooltip (Solution) [forked] by Shoyombo Gabriel Ayomide. Hoʻolauna ʻana i ke ʻano hoʻopaʻa ʻana me ka ʻole o nā hopena ʻaoʻao ʻO nā ala āpau i wehewehe ʻia ma ka ʻaoʻao mua e pili ana i ka "unstacking" i nā mea mai nā pōʻaiapili hoʻopaʻa pilikia, akā aia kekahi mau kūlana kahi āu e makemake ai a makemake paha e hana i kahi pōʻaiapili. He mea maʻalahi ka hana ʻana i kahi pōʻaiapili hoʻonohonoho hou, akā hele mai nā ala āpau me kahi hopena ʻaoʻao. ʻO ia hoʻi, koe wale nō ka hoʻohana ʻana i ke kaʻawale: hoʻokaʻawale. Ke hoʻohana ʻia i kahi mea, hoʻoholo ʻia ka pōʻaiapili hoʻopaʻa ʻana o nā keiki o ia mea e pili ana i kēlā me kēia keiki a i loko o ia pōʻaiapili, ma mua o ka hoʻopili ʻia ʻana e nā mea i waho. ʻO kahi hiʻohiʻona maʻamau ka hāʻawi ʻana i kēlā mea i kahi waiwai maikaʻi ʻole, e like me z-index: -1. E noʻonoʻo ʻoe he ʻāpana .card. Makemake ʻoe e hoʻohui i kahi ʻano hoʻonaninani e noho ana ma hope o ka kikokikona .card, akā ma luna o ke kāʻei o ke kāleka. Me ka ʻole o ka pōʻaiapili hoʻopaʻa ʻana ma ke kāleka, hoʻouna ʻo z-index: -1 i ke ʻano i lalo o ka pōʻaiapili hoʻopaʻa kumu (ka ʻaoʻao holoʻokoʻa). Nalo kēia ma hope o ke kāʻei keʻokeʻo o ka .card: E ʻike i ka Pen Negative z-index (pilikia) [forked] na Shoyombo Gabriel Ayomide. No ka hoʻoponopono ʻana i kēia, haʻi mākou i ka hoʻokaʻawale: hoʻokaʻawale i ka makua .card: E nānā i ka Pen Negative z-index (solution) [forked] na Shoyombo Gabriel Ayomide. I kēia manawa, lilo ka mea .card pono'ī i pōʻaiapili hoʻopaʻa. Ke loaʻa i kāna mea keiki - ke ʻano hoʻonaninani i hana ʻia ma ka:before pseudo-element - i ka z-index: -1, hele ia i lalo loa o ka pōʻaiapili hoʻonohonoho o ka makua. Noho maikaʻi ma hope o ka kikokikona a ma luna o ke kāʻei o ke kāleka, e like me ka mea i manaʻo ʻia. Ka hopena E hoʻomanaʻo: i ka manawa aʻe e ʻike ʻole ʻia kāu z-index, he pōʻaiapili hoʻopaʻa paʻa ia. Nā kuhikuhi
ʻO ka pōʻaiapili hoʻopaʻa ʻana (MDN) Z-index a me ka hoʻopaʻa ʻana i nā pōʻaiapili (web.dev) "Pehea e hana ai i kahi ʻatikala hou me ka waiwai kaʻawale ma CSS", Natalie Pina "He aha ka Heck, z-index??", Josh Comeau
Heluhelu hou aku ma SmashingMag
"Ka hoʻokele ʻana i ka CSS Z-Index i nā papahana nui", Steven Frieson "Nā Poʻomanaʻo Paʻa a me nā ʻElemu Kiʻekiʻe piha: He Hoʻohui Paʻakikī", Philip Braunen "Ka hoʻokele ʻana i ka Z-Index i kahi palapala hoʻohana pūnaewele i hoʻokumu ʻia", Pavel Pomerantsev "ʻO ka Z-Index CSS Property: A Comprehensive Look", Louis Lazaris
