Matsayi Gano abubuwan da ke dauke da Cascading Style Sheets
Ɗaya daga cikin kalubale yayin amfani da shafin CSS don shafin yanar gizon yanar gizo shine cewa wasu daga cikin abubuwanku na iya janye wasu. Wannan yana da kyau idan kuna so kashi na ƙarshe a cikin HTML ya kasance a saman, amma idan baku ba ko kuma idan kuna son samun abubuwa ba a halin yanzu ba su kori wasu don yin haka saboda zane yana kira wannan "layered" look ? Don canza yanayin gyaran hanyoyin da kake buƙatar kana buƙatar amfani da dukiya na CSS.
Idan kun yi amfani da kayan aikin kayan aiki a cikin Kalma da PowerPoint ko kuma mafi girman rikitaccen hoton hoto kamar Adobe Photoshop, to, akwai yiwuwar kun ga wani abu kamar z-index a cikin aikin. A cikin waɗannan shirye-shiryen, za ka iya haskaka abin da ka samo, kuma zaɓi wani zaɓi don "Aika da baya" ko "Ku zo gaban" wasu abubuwa na takardun ku. A Photoshop, ba ku da waɗannan ayyuka, amma kuna da nauyin "Layer" na shirin kuma zaka iya shirya inda wani abu ya fada a cikin zane ta hanyar raya waɗannan layer. A cikin waɗannan misalai biyu, kuna da ma'anar z-index na waɗannan abubuwa.
Menene z-index?
Lokacin da kake amfani da matsayi na CSS don sanya abubuwa a kan shafin, kana buƙatar tunani a cikin uku. Akwai nau'i biyu na hagu: hagu / dama kuma saman / kasa. Hagu zuwa hagu na dama an san shi azaman x-index, yayin da saman zuwa kasa daya shine y-index. Wannan shi ne yadda za ku sanya abubuwa a tsaye ko a tsaye, ta amfani da waɗannan alamu biyu.
Lokacin da ya zo zanen yanar gizo, akwai kuma tsari na tsafta na shafin. Kowace motsi a kan shafi na iya kasancewa sama ko žasa kowane nau'i. Shafin z-index yana ƙayyade inda a cikin tarihin kowane kashi ne. Idan x-index da y-index sune layin da ke tsaye da kuma tsaye, to, z-index shine zurfin shafin, ainihin matakan 3.
Ina so in yi la'akari da abubuwa a kan shafin yanar gizon a matsayin ƙananan takarda, da shafin yanar gizon kanta a matsayin abun haɗi. Inda zan sa takarda ta ƙayyade ta matsayi, da kuma yadda yawancin abubuwa ke rufe shi shine z-index.
Z-index yana da lamba, ko dai mai kyau (misali 100) ko korau (misali -100). Halin z-index shine 0. Sakamakon tare da mafi girma z-index yana saman, sannan mafi girma ta gaba kuma haka zuwa kasa zuwa zabin-mafiya ƙasƙanci. Idan abubuwa guda biyu suna da nau'in z-index (ko kuma ba a bayyana ba, ma'anar yin amfani da darajar ƙimar na 0) mai burauzar zai tsara su a cikin tsari da suke bayyana a cikin HTML.
Yadda ake amfani da z-index
Bada kowane ɓangaren da kake so a cikin tari din wani darajar z-index. Alal misali, idan ina da abubuwa biyar daban:
- kashi 1 - z-index of -25
- kashi 2 - z-index na 82
- kashi 3 - z-index ba a saita
- kashi 4 - z-index of 10
- kashi 5 - z-index of -3
Za su sa a cikin tsari mai biyowa:
- kashi 2
- kashi 4
- kashi 3
- kashi 5
- kashi 1
Ina bayar da shawarar yin amfani da ƙididdiga masu zabin-zane-zane daban-daban don ɗaukar abubuwanku. Wannan hanya, idan ka ƙara ƙarin abubuwa zuwa shafi daga baya, kana da dakin ajiye su a ciki ba tare da daidaita daidaitattun z-index na duk sauran abubuwa ba. Misali:
- 100 domin raina na mafi girma
- 0 domin matsayi na tsakiya
- -100 don kasa na kasa
Hakanan zaka iya ba da abubuwa guda biyu daidai da zabin index. Idan waɗannan abubuwa sun kasance suna ɓoye, za su nuna a cikin tsari da aka rubuta a cikin HTML, tare da kashi na ƙarshe a saman.
Ɗaya daga cikin bayanin kula, don wani ɓangaren don amfani da kayan z-index, yakamata ya zama nau'in matakin matakin ko amfani da nuni na "toshe" ko "inline-block" a cikin fayil na CSS.
Labari na farko daga Jennifer Krynin. Edited on 12/09/16 by Jeremy Girard.