I-CSS Ukubeka indawo ngaphezu kwe-Just X, Y Coordinates
Ukubekwa kwe-CSS bekude kube yinto ebalulekileyo yokudala izakhiwo zewebhusayithi. Ngaphandle kokunyuka kwamasu okutshintshwa kweCSS amasha njengeFlexbox kunye neCSS Grid, ukubeka indawo kusekho indawo ebalulekileyo kunayo nayiphi na ibhokisi ye-designer ye-tricks.
Xa usebenzisa i-CSS ukubeka indawo, into yokuqala okuza kuyidinga ukuyifaka isakhiwo seCSS kwindawo yokuxelela isiphequluli ukuba uya kusebenzisa ukubeka indawo okanye isihlobo esithile. Kufuneka kwakhona uqonde ngokucacileyo umahluko phakathi kwezi zikhundla ezimbini zokubeka indawo.
Ngoxa i-absolute kunye nesiqhelo zizinto eziphambili eziqhelekileyo ezisetyenziselwa ukuklanywa kwewebhu, kukho ngokwenene ezine zichaza kwindawo yepropati:
- static
- ngokupheleleyo
- isihlobo
- zi cwangciswe
I-static yindawo engagqibekanga kuyo nayiphi na into kwikhasi lewebhu. Ukuba awuyi kuchazi indawo yento, iya kuba yinto ecacileyo. Oku kuthetha ukuba iya kubonisa kwisikrini esekelwe apho kuxwebhu lwe-HTML kunye nokuba luyakubonisa njani ngaphakathi kolawulo oluqhelekileyo lwalooxwebhu .
Ukuba ubeka imithetho yokubeka indawo ephakamileyo okanye ekhohlo ukuya kwindawo ephethe isikhundla, loo mithetho iya kuhoywa kwaye iqela liza kuhlala livela kwindawo ebonakalayo yokuhamba komqulu. Enyanisweni, unganqabile ukuba, ukuba kunokwenzeka, ukuba ubeke isakhiwo kwindawo e-static ku-CSS kuba loo nto ixabiso elithethileyo.
Absolute CSS Positioning
Ukubeka indawo engafanelekanga mhlawumbi yindlela elula kakhulu yeCSS ukuyiqonda. Uqala ngepropati yeprojekthi yeCSS:
isikhundla: ngokupheleleyo;Le xabiso lixelela isiphequluli ukuba nayiphi na into eya kubeka kuyo ifanele isuswe kumanzi oqhelekileyo woxwebhu kwaye endaweni yayo ibekwa kwindawo echanekileyo kwiphepha. Oku kubalwa ngokusekelwe kweso sikhokho esiseduze kakhulu esingenasigxina.
Ngenxa yokuba isakhi esipheleleyo sithathwe ngaphandle kokuhamba komqulu, asiyi kuchaphazela indlela izinto eziphambi kwayo okanye emva kwayo kwi-HTML zimiweyo kwiphepha lewebhu.
Njengomzekelo - ukuba unesahlulo esasibekwe sisebenzisa ixabiso lentsebenziswano (siya kujonga eli xabiso kungekudala), kwaye ngaphakathi kwaleso sigaba unomhlathi owawufuna ukumisela iipikseli ezingama-50 ukusuka phezulu kwecandelo, idibanisa ixabiso lentlawulo "ngokupheleleyo" kuloo mhlathi kunye nexabiso lokukhutshwa kwe-50px kwipropati "phezulu", njengaye.
isikhundla: ngokupheleleyo; phezulu: 50px;Esi sigaba esimele sihlale siqwalasela ama-pixels angama-50 ukusuka phezulu kweso sigaba esichaseneyo - kungakhathaliseki ukuba yintoni enye ibonisa khona ukuhamba ngokuqhelekileyo. Isalathiso sakho "esilungileyo" esisetyenzisiweyo esifana nesimo sayo kunye nenani lokubaluleka oyisebenzisayo libonisa ukuba oko.
Iipropati ezine zokubeka ezikhoyo ukuzisebenzisa zi:
- phezulu
- kunene
- ngezantsi
- khohlo
Ungasebenzisa phezulu okanye ngaphantsi (kuba into ayinakukwazi ukubekwa ngokubhekiselele kwezo zombini) kunye nokuba ngasekunene okanye kwesobunxele.
Ukuba iqela libekwe kwisithuba esipheleleyo, kodwa kukho akakho ookhokho abangaqhelekanga, ngoko kuya kubeka indawo enxulumene nomzimba womzimba, eyona nqanaba eliphezulu lephepha.
Ukumisa ukuxhatshazwa
Sivele sichaza ukuma kwesihlobo, ngoko makhe sijonge kuloo propati ngoku.
Ukubeka indawo ngokuhambelanayo kusetyenziswa iipropati ezine zokubeka indawo njengendawo yokubeka indawo, kodwa esikhundleni sokusekela isikhundla sendawo kwixesha elikufutshane elingenasigxina elikhokho, liqala ukusuka apho ixabiso liza kuba khona ukuba lisaqhubeka lihamba.
Umzekelo, ukuba unemihlathi emithathu kwiphepha lakho lewebhu, kwaye okwesithathu ine "isikhundla: isihlobo" esibekiwe kuso, isikhundla siya kugxothwa ngokusekelwe kwindawo yaloo ndawo.
Isiqendu 1.
Isiqendu sesi-2.
Isiqendu 3.
Kulo mzekelo ukhankanywe ngasentla, umhlathi wesithathu uya kufakwa u-2em ukusuka kwicala lasekhohlo lento yesitya, kodwa kuya kusekho ngaphantsi kwemihlathi emibini yokuqala. Kuza kuhlala kuhamba ngokuqhelekileyo koxwebhu, kwaye ulungele ukunciphisa. Ukuba uyitshintshile ukuba ibe yindawo: ngokupheleleyo; nantoni na elandelayo iya kubonisa ngaphezulu kwayo, kuba yayingeke isayi kuhamba ngokuqhelekileyo koxwebhu.
Izinto ezikwiphepha lewebhu zihlala zisetyenziselwa ukusetha ixabiso lesimo: zihambelana nexabiso elingasetyenziswanga elisekweyo, oku kuthetha ukuba into ehlala ihlala apho iyakubonakala khona kwindawo yokuhamba. Oku kwenziwa kuphela ukuseka eso sakhiwo njengomxholo apho ezinye izinto zingasetyenziswa ngokupheleleyo. Ngokomzekelo, ukuba unesahlulo esijikeleze iwebhusayithi yakho yonke ngexabiso leklasi ye "inkontila" (eyona yinto eqhelekileyo kwi-design web), eso sahlulo singasetwa kwisikhundla sesiqhelo ukuze nantoni na ngaphakathi ngaphakathi isebenzise njengendawo yokubeka indawo.
Kuthiwani Ngokumalunga Kwendawo?
Ukubeka indawo ehleliweyo kuninzi nje ukubeka indawo. Isikhundla salo mzimba sibalwa ngendlela efanayo nomzekelo opheleleyo, kodwa izinto ezizimeleyo zigcinwa kuloo ndawo-malunga ne- watermark . Yonke into ephepheni iya kupheqa loo ndawo.
Ukusebenzisa le xabiso lepropati, uza kusetha:
isikhundla:Gcinani engqondweni, xa ulungisa into ekhoyo kwindawo yakho, iya kuprinta kuloo ndawo xa iphepha lakho lewebhu liprintwe. Umzekelo, ukuba iqela lakho lichanekile phezulu kwiphepha lakho, liya kuvela phezulu kwiphepha ngalinye eliprintiweyo - kuba lichanekile phezulu kwiphepha. Ungasebenzisa iintlobo zamaphephandaba ukuze utshintshe indlela amaphepha apapashiweyo abonisa ngayo izinto ezizimeleyo:
@media isikrini {h1 # yokuqala {indawo: ichanekile; }} @media print {h1 # yokuqala {isikhundla: static; }}Inqaku loqobo loJennifer Krynin. Ulungiswe nguJeremy Girard ngomhla we-1/7/16.