Pozicionimi i elementëve të mbivendosur me fletët e stilit Cascading
Një nga sfidat kur përdoret pozicioni CSS për faqosjen e faqes së internetit është se disa nga elementët tuaj mund të mbivendosen me të tjerët. Kjo funksionon mirë nëse doni që elementi i fundit në HTML të jetë në krye, por çka nëse nuk bëni apo çfarë nëse doni të keni elementë që aktualisht nuk mbivendosen me të tjerët për ta bërë këtë, sepse dizajni bën thirrje për këtë pamje "të shtresuar" ? Për të ndryshuar mënyrën se si elementët mbivendosen, ju duhet të përdorni pronën e CSS.
Nëse keni përdorur mjete grafike në Word dhe PowerPoint ose redaktues më të fuqishëm të imazhit si Adobe Photoshop, atëherë shanset janë që keni parë diçka si z-indeksi në veprim. Në këto programe, mund të nxjerrni në pah objektin që keni tërhequr dhe zgjidhni një mundësi për të "Dërguar në kthim" ose "Sillni përpara" elemente të caktuara të dokumentit tuaj. Në Photoshop, ju nuk keni këto funksione, por ju keni "panelin e shtresës" të programit dhe mund të rregulloni se ku një element bie në kanavacë duke riorganizuar këto shtresa. Në të dyja këto shembuj, ju jeni në thelb vendosjen e indeksit z të këtyre objekteve.
Çfarë është z-indeksi?
Kur përdorni CSS për të pozicionuar elementë në faqe, duhet të mendoni në tre dimensione. Ekzistojnë dy dimensione standarde: majtas / djathtas dhe lart / poshtë. Indeksi i majtë në të djathtë njihet si indeksi x, ndërsa pjesa e sipërme në fund është indeksi y. Kjo është se si do t'i poziciononit elementet horizontalisht ose vertikalisht, duke përdorur këto dy indekse.
Kur vjen në web design, ekziston edhe rendi i vendosjes së faqes. Çdo element në faqe mund të shtrihet mbi ose nën çdo element tjetër. Prona z-index përcakton se ku në rafte secili element është. Nëse x-indeksi dhe indeksi y janë linjat horizontale dhe vertikale, atëherë z-indeksi është thellësia e faqes, në thelb dimensioni i 3-të.
Më pëlqen të mendoj për elementet në një faqe si copa letre, dhe vetë faqja web si një kolazh. Ku unë vë letrën përcaktohet nga pozicionimi, dhe sa nga ajo është e mbuluar nga elementet e tjera është z-indeksi.
Indeksi z është një numër, qoftë pozitiv (p.sh. 100) ose negativ (p.sh. -100). Z-indeksi i parazgjedhur është 0. Elementi me z-indeksin më të lartë është në krye, e ndjekur nga e ardhshmja më e lartë dhe kështu me radhë deri në z-indeksin më të ulët. Nëse dy elementë kanë të njëjtën vlerë z-indeksi (ose nuk është përcaktuar, që do të thotë përdorimi i vlerës së parazgjedhur të 0), shfletuesi do t'i shtrijë ato sipas porosisë që shfaqen në HTML.
Si të përdorni z-index
Jepni çdo element që dëshironi në rafte tuaj një vlerë të ndryshme z-indeksi. Për shembull, nëse kam pesë elementë të ndryshëm:
- element 1 - z-indeksi i -25
- elementi 2 - z-indeksi i 82
- element 3 - z-indeksi nuk është vendosur
- element 4 - z-indeksi i 10
- elementi 5 - z-indeksi i -3
Ata do të radhiten në rendin e mëposhtëm:
- element 2
- element 4
- element 3
- element 5
- element 1
Unë rekomandoj që të përdorni vlera shumë të ndryshme z-indeksi për të grumbulluar elementet tuaja. Në këtë mënyrë, nëse i shtoni më shumë elementë në faqe më vonë, ju keni hapësirë për t'i shtruar ato pa pasur nevojë të rregulloni vlerat e indeksit z të të gjithë elementëve të tjerë. Për shembull:
- 100 për elementin tim më të lartë
- 0 për elementin tim të mesëm
- -100 për elementin tim të fundit
Ju gjithashtu mund të jepni dy elementë të njëjtën vlerë z-indeksi. Nëse këto elemente janë bërë pirg, ata do të shfaqen në mënyrë që ato të jenë të shkruara në HTML, me elementin e fundit në krye.
Një shënim, për një element që përdor efektivisht zotërimin e z-index, duhet të jetë një element i nivelit të bllokut ose të përdorë një ekran "bllok" ose "inline-block" në skedarin tuaj CSS.
Artikulli origjinal nga Jennifer Krynin. Redaktuar me datë 12/09/16 nga Jeremy Girard.