Ka hoʻonohonohoʻana i nā mea e hoʻoulu ai i nā meaʻene me nā hōʻailona Kānehi
ʻO kekahi o nā pahuhopu i ka hoʻohanaʻana i ka hoʻonohonoho CSS no kaʻaoʻao pūnaewele kahi o kahi mau māmā e lilo i kahi'ē aʻe i kekahi. Hana maikaʻi kēia inā makemakeʻoe i ka mea hope loa i ka HTML e noho ma luna, akā pehea kāu ināʻaʻoleʻoe a ināʻaʻoleʻoe e makemake e loaʻa nā'enewai i kēia manawaʻaʻole e hoʻonui i nā mea'ē aʻe no ka mea e kāhea ana ka manaʻo no kēia "nānā" ? I mea e hoʻololi ai i nā ala o ke kuhi ponoʻana, ponoʻoe e hoʻohana i ka waiwai o CSS.
Inā ua hoʻohanaʻoe i nā mea hana kiʻi kiʻi ma Word a me PowerPoint aʻoiʻoi aku paha ka hoʻoponopono kiʻi kiʻi e like me Adobe Photoshop, inā uaʻikeʻoe i kekahi mea like z-index i ka hana. Ma kēia mau papahana, hiki iāʻoe ke kuhikuhi i nā mea āu i kahakaha ai, a koho i kahi koho e "Hoʻouna aku e hoʻi" a iʻole "E lawe i mua" kekahi mau kikowaena o kāu palapala. Ma Photoshop,ʻaʻoleʻoe i kēia mau hana, akā aia iāʻoe ka pane "Layer" o ka papahana a hiki iāʻoe ke hoʻonohonoho i kahi e hāʻule ai kekahi mea i ke kāʻei ma o ka hoʻokumuʻana i kēia mau papa. I loko o kēia mau hiʻohiʻonaʻelua, ke hoʻonoho neiʻoe i ka z-index o kēlā mau mea.
He aha ka z-index?
Ke hoʻohana neiʻoe i ka positioning CSS e hoʻonohonoho i nā'enewa ma kaʻaoʻao, ponoʻoe e noʻonoʻo iʻekolu mauʻano. Aia nāʻaoʻao maʻamauʻelua: ka hema /'ākau a me luna / lalo. ʻO ka hema i ka 'ākau' āina pololei ka mea iʻikeʻia he x-index,ʻoiai o ka luna i lalo kekahi i ka y-index. ʻO kēia keʻano e hoʻonoho aiʻoe i nā māmā ma waho a iʻole ia i ka'ākau, me ka hoʻohanaʻana i kēia mau hua'ōleloʻelua.
I ka wā e hiki mai ai i ka hoʻolālā pūnaewele, aia nō hoʻi ke kauoha hoʻolālā o kaʻaoʻao. Hiki ke hoʻoiliʻia kēlā me kēia mahele o kaʻaoʻao ma luna a ma lalo paha o kekahi mea'ē aʻe. Hiki i ka waiwai z-index ka hoʻoholo i hea kahi paʻa i kēlā me kēia me kēia. Inā he x-index a me ka helu-index nā laina ākea a me ke kauwaina, a laila o ka huahelu z-index ka hohonu o kaʻaoʻao,ʻo ia keʻanoʻekolu.
Makemake wau e noʻonoʻo i nā kumuhana ma ka pūnaewele i mau pepa'āpana, a me ka pūnaewele pūnaewele iho me kahi pilina. Ma kahi e waiho wau i ka pepa e hoʻoholoʻia ma ka hoʻonohonohoʻana, aʻo ka nui o ia mea i uhiʻia e nā kumu'ē aʻe,ʻo ia ka z-index.
ʻO ka helu-z-index he helu, maikaʻi paha (e like me ka helu 100) aʻoleʻoleʻole (eg -100). ʻO ka'ōkuhi z-index ka 0.ʻO ka mea me ka kiʻekiʻe-z-index ka mea ma luna, a ma muli o ka mea kiʻekiʻe aʻe a pēlā nō i lalo iho i lalo i ka haʻina kuhikuhi haʻahaʻa loa. Ināʻelua mau mea like me ka helu-z-index (aʻaʻole paha i weheweheʻia, e pili ana i ka hoʻohanaʻana i ka waiwai kūpono o 0) e hoʻokumuʻia e ka polokalamu kelepona ma ka hoʻonohonoho iʻikeʻia ma ka HTML.
Pehea e hoʻohana ai i ka z-index
E hāʻawi i kēlā me kēia māhele āu e makemake ai ma kāu pūnaewele i kahi kumu kūʻai z-index'ē aʻe. Eia kekahi lā, inā he mauʻokoʻa likeʻelima:
- wae 1 - z-index of -25
- ka helu 2 - z-index of 82
- ka helu 3 - z-indexʻaʻole i hoʻonohonohoʻia
- ka helu 4 - z-index o 10
- wae 5 - z-index of -3
E kāpiliʻia lākou i kēiaʻaoʻao:
- ka hopena 2
- ka helu 4
- ka helu 3
- wae 5
- wae 1
Ke hāpai nei au i ka hoʻohanaʻana i nā hoʻohālike z-index nui loa e hoʻopaʻa i kāu mau mea. ʻO ia ala, ināʻoe e hoʻonui i mau mau mea i kaʻaoʻao ma hope, loaʻa iāʻoe kahi lumi e hoʻopaʻa ai iā lākou me kaʻole e hoʻololi i nā koina z-index o nā mea'ē aʻe. ʻo kahi laʻana:
- 100 no koʻu mea nui loa
- 0 no koʻu kino waena
- -100 no koʻu kumu haʻahaʻa
Hiki iāʻoe ke hāʻawi iʻelua mau māmā i ke kumukūlena z-index. Inā hoʻokomoʻia kēia mau māmā, e hōʻike lākou i ka papahana i kākauʻia i loko o ka HTML, me ka mea hope ma luna.
Hoʻokahi memo, no kekahi mea e hoʻohana pono i ka waiwai z-index, pono ia he mahele pae'āwaewa a hoʻohana i kahi hōʻike o "pole" aiʻole "inline-block" ma kāu pūnaewele CSS.
Ka'ōlelo kumu mua na Jennifer Krynin. Hoʻoponoponoʻia ma ka lā 12/09/16 e Jeremy Girard.