I-CSS Positioning ingaphezu kwe-Just X, Y Coordinates
Ukubekwa kwe-CSS sekuyisikhathi eside kube yingxenye ebalulekile yokudala izakhiwo zewebhu. Ngisho nokuphakama kwamasu okuhlela eCSS amasha afana ne-Flexbox ne-CSS Grid, ukumisa kusenendawo ebalulekile kunoma yikuphi isikhwama se-designer web web design.
Uma usebenzisa ukubeka i-CSS, into yokuqala okuzodingeka uyenze ukusungula impahla ye-CSS yesikhundla sokutshela isiphequluli uma uzosebenzisa ukuma okuphelele noma kwesihlobo sento esinikeziwe. Kumele uqonde ngokucacile umehluko phakathi kwalezi zici ezimbili zokubeka indawo.
Ngenkathi iphelele futhi isihlobo yizindawo ezimbili ze-CSS ezivame ukusetshenziselwa ukuklanywa kwewebhu, empeleni kukhona ezine ezichaza impahla:
- static
- ngokuphelele
- isihlobo
- fixed
I-static yisimo esizenzakalelayo kunoma iyiphi into ekhasini lewebhu. Uma ungachazi isimo se-element, kuyobe i-static. Lokhu kusho ukuthi kuzobonisa esikrinini ngokusekelwe lapho ku- idokhumenti ye-HTML nokuthi ingabonisa kanjani ngaphakathi kokugeleza okujwayelekile kwalowo dokhumenti.
Uma ufaka isicelo sokubeka imithetho njengokuphezulu noma kwesokunxele kuya kwisici esinesimo esiphezulu, leyo mithetho izobe ishaywa futhi isici sizohlala lapho sibonakala ngokugeleza kwedokhumenti evamile. Eqinisweni, ngeke ube nesidingo, uma kunesidingo, ukubeka isici esimweni esivela ku-CSS ngoba lokho kuyinani elizenzakalelayo.
I-Absolute CSS Positioning
Ukubeka ngokuzenzakalelayo cishe yiyona ndlela elula ye-CSS yokuqonda. Uqala ngalesi sakhiwo se-CSS:
isikhundla: ngokuphelele;Leli xabiso litshela isiphequluli ukuthi konke okuzobekwa khona kufanele kususwe ekugeleza okujwayelekile kwedokhumenti futhi esikhundleni salokho kufakwe endaweni eqondile ekhasini. Lokhu kubalwa ngokusekelwe kwokhokho obuseduze obunjalo obunjalo obunjalo obuhle.
Ngenxa yokuthi into ehlelwe ngokuphelele ikhishwa ekuhambeni okujwayelekile kwedokhumenti, ngeke ithinte indlela izakhi ngaphambi kwayo noma ngemuva kwayo ku-HTML zimi ekhasini lewebhu.
Isibonelo - uma ngabe unesahlukaniso esimisiwe sisebenzisa inani lohlobo (sizobheka le nzuzo maduzane), futhi ngaphakathi kwaleyo sigaba unesigaba owafuna ukumisa amaphikseli angu-50 ukusuka phezulu kwesigaba, wena ingeza inani lokuma "eliphelele" kuleso sigatshana kanye nenani elimisiwe le-50px kwimpahla "phezulu," njengale.
isikhundla: ngokuphelele; phezulu: 50px;Lesi sici esibekwe kahle ngaso sonke isikhathi sizobe sibonisa amaphikseli angu-50 kusukela phezulu kwaleyo mpahla ehlelekile - kungakhathaliseki ukuthi yini enye ekhombisa lapho kugeleza okujwayelekile. Isici sakho "ngokuphelele" esetshenziselwa ukulingana nesimo salo kanye nesilinganiso sokubaluleka ozisebenzisayo sihlobene nokuthi lokho.
Izakhiwo ezine zokubeka izinto ozitholakalayo ozisebenzisayo yizi:
- phezulu
- kwesokudla
- phansi
- kwesokunxele
Ungasebenzisa noma phezulu noma phansi (ngoba isici asikwazi ukuma ngokusho kokubili kwalezi zindinganiso) futhi ngakwesokudla noma kwesobunxele.
Uma isethi isethelwe esimweni esiphelele, kodwa lapho sinakho okhokho abangekho obala, khona-ke iyobekwa ngokuhlobene nesici somzimba, okuyisici esiphezulu sekhasi.
Ukumiswa okuhlobene
Sesivele sikhulume ngokuma kwesihlobo, ngakho ake sibheke leyo ndawo manje.
Ukubekwa kwezihlobo kusetshenziselwa izindawo ezifanayo zokubeka indawo njengendawo yokubeka indawo ngokuphelele, kodwa esikhundleni sokusekela isikhundla se-element phezu kwokhokho esiseduzane non-staticly positioned, iqala kusuka lapho i-element kuyoba khona uma kusengaphakathi ukugeleza evamile.
Isibonelo, uma unezigaba ezintathu kwikhasi lakho lewebhusayithi, kanti okwesithathu kunesitayela "isikhundla: isihlobo" esibekwa kuso, isikhundla sizokwenqabela ngokusekelwe endaweni yamanje.
Isigaba 1.
Isigaba 2.
Isigaba 3.
Kulesi sibonelo esingenhla, isigaba sesithathu sizobekwa endaweni engu-2m ukusuka ohlangothini lwesobunxele lwesici sesitsha, kodwa sisengaphansi kwezingxenye ezimbili zokuqala. Kuzohlala ukugeleza okujwayelekile kwedokhumenti, bese nje uhlehlise kancane. Uma usishintshile ukuthi ubuke: ngokuphelele; noma yikuphi okulandelayo kuzobe kuboniswe ngaphezulu, ngoba bekungeke kube khona ukugeleza okujwayelekile kwedokhumenti.
Izinto ezisekhasini lewebhu zivame ukusetshenziselwa ukusetha ukubaluleka kokuma: okuhlobene nokungabi namanani okwehlisiwe, okusho ukuthi isici sihlala ngqo lapho sizovela khona ekugezeni okujwayelekile. Lokhu kwenziwa kuphela ukuze kutholakale ukuthi isici njengesiqu lapho ezinye izakhi zingafakwa khona ngokuphelele. Isibonelo, uma unesigaba esizungezile iwebhusayithi yakho yonke ngekhwalithi yesigaba "sesitsha" (okuyinto isimo esivamile kakhulu kumklamo wewebhu), leso sigaba singasetwa esimweni sesihlobo ukuze noma yini ngaphakathi ngaphakathi ingasebenzisa njengengqikithi yokuma.
Kuthiwani Nge-Fixed Positioning?
Ukuma okuhleliwe kufana nokuma okuphelele. Isikhundla se-element sibalwa ngendlela efanayo nomfanekiso ophelele, kodwa izakhi ezihleliwe zibekiwe kulowo ndawo- cishe njenge- watermark . Konke okunye ekhasini elizobe selipheqa lelo qembu.
Ukuze usebenzise leli xabiso lempahla, ungabeka:
isikhundla: fixed;Gcina engqondweni, uma ulungisa isici endaweni yakho, uzophrinta kule ndawo lapho ikhasi lakho lewebhu liphrintiwe. Isibonelo, uma isici sakho siphezulu phezulu kwekhasi lakho, lizovela phezulu kwekhasi ngalinye eliphrintiwe - ngoba lihleliwe phezulu kwekhasi. Ungasebenzisa izinhlobo zemidiya ukuze ushintshe indlela amakhasi abhalwe ngayo abonisa izinto ezihleliwe:
@media screen {h1 # yokuqala {isikhundla: fixed; }} @media ukuphrinta {h1 # kuqala {isikhundla: static; }}Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngomhla ka-1/7/16.