Kuyika Zida Zogwirizanitsa ndi Mapepala A Mtundu Wosakaniza
Imodzi mwa zovuta pamene mukugwiritsa ntchito CSS kukhazikitsa tsamba la tsamba la webusaiti ndikuti zina mwa zinthu zanu zingagwirizane ndi ena. Izi zimakhala bwino ngati mukufuna chinthu chomaliza ku HTML kukhala pamwamba, koma bwanji ngati simukufuna kapena ngati mukufuna kukhala ndi zinthu zomwe pakalipano sizikuphatikizapo ena kuti azichita choncho chifukwa chojambula chimawoneka ? Pofuna kusintha njira zomwe zimagwirira ntchito muyenera kugwiritsa ntchito katundu wa CSS.
Ngati mwagwiritsa ntchito zipangizo zamagetsi mu Mawu ndi PowerPoint kapena mkonzi wodabwitsa wa zithunzi monga Adobe Photoshop, ndiye mwayi kuti mwawona zinthu monga zondomeko zomwe zikuchitika. Mu mapulogalamuwa, mukhoza kusonyeza chinthu chimene mwasankha, ndipo sankhani njira yoti "Tumizani kumbuyo" kapena "Bweretsani" mbali zina za chilemba chanu. Mu Photoshop, mulibe ntchitoyi, koma muli ndi "Zigawo" pa pulogalamuyi ndipo mukhoza kukonza zomwe chinthu chimagwera muzitsulo mwa kukonzanso zigawo izi. Mu zitsanzo zonsezi, mukusankha z-zizindikiro za zinthuzo.
Kodi z-ndondomeko ndi chiyani?
Pamene mukugwiritsa ntchito CSS kuikapo zinthu pamasamba, muyenera kulingalira mu miyeso itatu. Pali miyeso iwiri yofanana: kumanzere / kumanja ndi pamwamba / pansi. Tsamba lakumanzere kumanja yolondola limadziwika ngati x-index, pomwe pamwamba mpaka pansi imodzi ndi y-index. Umu ndi mmene mungakhazikitsire zinthu zozungulira kapena zowonongeka, pogwiritsa ntchito zilembo ziwirizi.
Pamene imabwera pa intaneti, palinso ndondomeko yosungiramo tsamba la tsamba. Chilichonse pa tsambachi chikhoza kunyezedwa pamwamba kapena pansi pa chinthu chilichonse. Malo osindikizira a z-zotsatila amadziwika kuti pali chipila chilichonse chiri chonse. Ngati x-index ndi y-ndondomeko ndizowongoka ndi zowona, ndiye z-index ndi kuya kwa tsamba, makamaka gawo lachitatu.
Ndimakonda kuganizira zinthu zomwe zili pa tsambali ngati mapepala, ndi tsamba lokha ngati collage. Kumene ndimagwiritsira ntchito pepalali ndilokhazikika, ndi kuchuluka kwa zomwe zimapangidwa ndi zinthu zina ndi z-index.
Z-zolemba ndi nambala, kaya zabwino (mwachitsanzo 100) kapena zoipa (mwachitsanzo -100). Zowonongeka z-ndondomeko ndi 0. Zomwe zili ndizomwe zili pamwamba ndizomwe zili pamwamba, zotsatiridwa ndizomwe zili pamwamba ndikupitirira mpaka pazomwe zili zozama kwambiri. Ngati zinthu ziwiri zili ndi zizindikiro zofanana (kapena sizikutanthawuzidwa, kutanthauza kugwiritsa ntchito chinthu chosasinthika cha 0) osatsegulayo adzawasungira mu dongosolo kuti awoneke mu HTML.
Mmene Mungagwiritsire ntchito z-ndondomeko
Perekani chinthu chilichonse chimene mukufuna mu stack yanu yosiyana-siyana. Mwachitsanzo, ngati ndili ndi zinthu zisanu zosiyana:
- gawo 1 - z-index ya -25
- gawo 2 - z-index ya 82
- gawo 3 - z-ndondomeko yosayikidwa
- gawo 4 - z-index ya 10
- gawo 5 - z-index ya -3
Adzasungidwa motere:
- gawo 2
- gawo 4
- gawo 3
- gawo 5
- gawo 1
Ndikupangira kugwiritsa ntchito zosiyana z-zizindikiro zamalonda kuti muikepo zinthu zanu. Mwanjira imeneyo, ngati inu muwonjezerapo zinthu zina pa tsamba pambuyo pake, muli ndi malo oti muzisungiramo popanda kusintha ndondomeko zamalongosola zazinthu zina zonse. Mwachitsanzo:
- 100 chifukwa changa chofunika kwambiri
- 0 kwa gawo langa lapakati
- -100 kwa gawo langa la pansi
Mukhozanso kupereka zinthu ziwiri zofanana z-index value. Ngati zinthuzi zikuphatikizidwa, ziwonetseratu mwadongosolo zomwe zalembedwa mu HTML, ndi gawo lomaliza pamwamba.
Cholemba chimodzi, kuti chigwiritsidwe ntchito mogwiritsa ntchito z-zolemba katundu, chiyenera kukhala choyimira chigawo kapena kugwiritsa ntchito "block" kapena "inline-block" mu file CSS yanu.
Nkhani yoyamba ndi Jennifer Krynin. Idasinthidwa pa 12/09/16 ndi Jeremy Girard.