CSS Positioning ke Ntle ho Just X, Y Coordinates
Ho behoa ha CSS nako e telele e bile karolo ea bohlokoa ea ho theha marang-rang a marang-rang. Esita le ka ts'ebetso ea mekhoa ea bocha ea CSS e ts'oanang le ea Flexbox le CSS Grid, boemo bo ntse bo na le sebaka sa bohlokoa ho mokotleng ofe kapa ofe oa sebōpeho sa websaete ea maqheka.
Ha o sebelisa boemo ba CSS, ntho ea pele eo u tla tlameha ho e etsa ke ho theha setša sa CSS bakeng sa boemo ba ho bolella sebapali haeba u tla sebelisa boemo bo feletseng kapa bo amanang le ntlha e fanoeng. Hape u hloka ho utloisisa ka ho hlaka phapang pakeng tsa lisebelisoa tsena tse peli tsa boemo.
Le hoja botlalo le kamano ea tsona ke libaka tse peli tsa boemo ba CSS tse atisang ho sebelisoa moqapong oa marang-rang, ho na le tse 'nè tse bolelang setšeng sa boemo:
- e tsitsitseng
- e feletseng
- mong ka uena
- e tsitsitseng
E tsitsitseng ke boemo bo sa lekanyetsoang bakeng sa ntho efe kapa efe leqepheng la websaete. Haeba u sa hlalose boemo ba ntho e itseng, e tla ba e tsitsitseng. Sena se bolela hore se tla bonts'oa ka skrineng ho latela moo e leng tokomaneng ea HTML le kamoo e neng e tla bontša kateng ka hare ho phallo e tloaelehileng ea tokomane eo.
Haeba o sebelisa melao ea maemo a kang holimo kapa ka ho le letšehali ho ea ho karolo e nang le boemo bo tsitsitseng, melao eo e tla hlokomolohuoa 'me karolo e tla sala moo e hlahang ka mokhoa o tloaelehileng oa phallo. Ha e le hantle, u ne u tla ba le seoelo, haeba ho hlokahala, hore u behe sebopeho sebakeng se tsitsitseng CSS kaha seo ke boleng ba kamehla.
Ho feletseng CSS Positioning
Sebaka se setle ke moelelo o bonolo ka ho fetisisa oa CSS oa ho utloisisa. O qala ka thepa ea boemo ba CSS:
boemo: ho feletseng;Bohloko bona bo bolella sebapali hore ntho efe kapa efe e tla be e behoa e lokela ho tlosoa ho phallo e tloaelehileng ea tokomane mme ho e-na le hore e behoe sebakeng se tobileng leqepheng lena. Sena se baloa ho itšetlehile ka moholo-holo ea haufi-ufi eo e seng setho sa boemo boo.
Hobane ntho e hlakileng e nkiloe ho tsoa phalong e tloaelehileng ea tokomane, e ke ke ea ama tsela eo likarolo pele ho eona kapa ka mor'a eona ka HTML li behiloeng leqepheng la web.
Ka mohlala - haeba u ne u e-na le karohano e neng e eme ka ho sebelisa boleng ba kamano (re tla sheba bohlokoa ba morao tjena), 'me ka hare ho karohano eo u na le serapa seo u neng u batla ho se fa li-pixelse tse 50 ho tloha ka holim'a karohano, uena e ka eketsa bohlokoa ba boemo ba "feletseng" ho serapa seo hammoho le phaello ea offset ea 50px "thepa" thepa, joaloka ena.
boemo: ho feletseng; holimo: 50px;Sena se ne se tla lula se bontša li-pixelse tse 50 ho tloha ka holimo karolong eo e batlang e arohane - ho sa tsotellehe hore na ho na le eng hape e bonts'a moo ka potlako e tloaelehileng. Sebopeho sa hau sa "hantle" se sebelisitsoeng hantle se lekanang le se nang le moelelo oa sona le bohlokoa boo u bo sebelisang bo lekanyelitse hore seo.
Lisebelisoa tse 'nè tseo u nang le tsona tseo u ka li sebelisang ke tsena:
- holimo
- ka ho le letona
- tlase
- ho le letšehali
O ka sebedisa ka holimo kapa ka tlasa (kaha setho se ke ke sa ema ho latela maemo ana ka bobeli) le ka ho le letona kapa ka ho le letšehali.
Haeba karolo e behiloe boemong bo feletseng, empa ha e na bo-ntat'a bona ba sa hlahang hantle, joale e tla be e lekanngoe le karolo ea 'mele, e leng ntlha e phahameng ka ho fetisisa ea leqephe.
Positioning Relative
Re se re boletse boemo bo amanang, kahoo a re shebeng setša seo hona joale.
Sebaka se amanang le sona se sebelisa libaka tse 'nè tsa boemong ba ho beha boemo bo lekaneng, empa ho e-na le ho theha boemo ba motsoako holim' a moholo-holo oa eona ea haufi-ufi eo e seng o tsitsitseng, e qala ho tloha moo e ka bang teng ha e ntse e le phallo e tloaelehileng.
Ka mohlala, haeba u e-na le lirapa tse tharo leqepheng la hau la marang-rang, 'me oa boraro o na le sebaka sa "boemo: se amanang" le sona se behiloeng ho sona, boemo bo tla tlosoa ho latela sebaka sa hona joale.
Serapeng sa 1.
Serapeng sa 2.
Serapeng sa 3.
Mohlala o ka holimo, serapa sa boraro se tla behoa ka 2em ho tloha ka lehlakoreng le letšehali la tšebetso ea setshelo, empa e ntse e tla ba tlase ho lirapa tse peli tsa pele. E ne e tla lula e ntse e phalla ka mokhoa o tloaelehileng oa tokomane eo, 'me e mpe e fokotsehe hanyane. Haeba ue fetotse ho ema: ho feletseng; ntho leha e le efe e latelang e ne e tla bonahala holim'a eona, hobane e ne e ke ke ea hlola e e-ba ka potlako e tloaelehileng ea tokomane eo.
Lihlooho tse leqepheng la websaete li atisa ho sebelisoa ho beha boemo ba boemo: se amanang le ha ho na phalliso e tsitsitseng e boletsoeng, e bolelang hore karolo e sala e le moo e neng e tla hlaha ka mokhoa o tloaelehileng oa phallo. Sena se etsoa feela ho tiisa ntlha eo e le moelelo oo likarolo tse ling li ka emang ka ho feletseng. Ka mohlala, haeba u na le karohano e potolohileng sebaka sa hau sa marang-rang ka boleng ba sehlopha sa "setshelo" (e leng boemo bo tloaelehileng haholo ho sebopeho sa marang-rang), karohano eo e ka behoa boemong ba kamano e le hore ntho leha e le efe e ka hare ho eona e ka sebelisoa e le boemo ba boemo ba boemo.
Ho thoe'ng ka Fixed Positioning?
Sebaka se tsitsitseng se tšoana haholo le boemo bo feletseng. Sebaka sa element e baloa ka tsela e ts'oanang le mohlala o phethahetseng, empa lisebelisoa tse tsitsitseng li behiloe sebakeng seo-hoo e batlang e le watermark . Ntho e 'ngoe le e' ngoe e leqepheng lena e tla phunya karolo eo.
Ho sebelisa boleng ba thepa ena, u ka beha:
boemo: bo tsitsitseng;Hopola, ha u lokisa ntho e itseng sebakeng sa hau, e tla hatisoa sebakeng seo ha leqephe la hau la Websaete le hatisoa. Ka mohlala, haeba karolo ea hau e ts'oaretsoe ka holimo ho leqephe la hau, e tla hlaha ka holimo ho leqephe le leng le le leng le hatisitsoeng - hobane le hlophisitsoe holimo ho leqephe. U ka sebelisa mefuta ea mecha ea litaba ho fetola kamoo maqephe a hatisitsoeng a bontšang likarolo tse tsitsitseng:
@media screen {h1 # pele {sebaka: se tsitsitseng; }} @media print {h1 # pele {boemo: static; }}Sehlooho sa pele sa Jennifer Krynin. E hlophisitsoeng ke Jeremy Girard ka la 1/7/16.