Posisi CSS luwih saka X, Koordinat Y
Posisi CSS wis suwe dadi bagian penting kanggo nggawe tata letak situs web. Malah kanthi tuwuh saka teknik tata letak CSS luwih anyar kaya Flexbox lan CSS Grid, posisi isih nduweni panggonan penting ing tas trik desainer web.
Nalika nggunakake posisi CSS, sampeyan kudu nggawe properti CSS kanggo posisi marang browser yen sampeyan bakal nggunakake posisi absolut utawa relatif kanggo unsur tartamtu. Sampeyan uga kudu mangerteni kanthi prasaja antarane loro posisi posisi kasebut.
Nalika absolut lan relatif loro sifat posisi CSS paling asring digunakake ing desain web, ana sing bener ana 4 negara kanggo properti posisi:
- statis
- mutlak
- relatif
- tetep
Statis minangka posisi standar kanggo sembarang elemen ing kaca web. Yen sampeyan ora nemtokake posisi sawijining unsur, bakal dadi statis. Iki tegese bakal ditampilake ing layar adhedhasar ing ngendi dokumen HTML lan cara sing bakal ditampilake ing aliran normal saka dokumen kasebut.
Yen sampeyan nggunakake aturan posisi kaya ndhuwur utawa kiwa menyang unsur sing nduweni posisi statis, aturan kasebut bakal diabaikan lan unsur bakal tetep ing ngendi katon ing aliran dokumen normal. Bener, sampeyan bakal jarang nemtokake sawijining unsur menyang posisi statis ing CSS wiwit iku minangka nilai default.
Posisi Absolute CSS
Posisi absolut mbokmenawa posisi paling gampang CSS dimangerteni. Sampeyan miwiti kanthi properti CSS iki:
posisi: Absolute;Nilai kasebut ngandhani browser yen apa wae sing arep diposisikan kudu dibusak saka aliran normal dokumen lan tinimbang diselehake ing lokasi sing bener ing kaca. Iki diitung adhedhasar leluhur paling cedhak unsur paling cedhak karo unsur kasebut.
Amarga unsur pancen sing ditemtokake dijupuk saka aliran normal saka dokumen kasebut, ora bakal mengaruhi carane elemen sadurunge utawa sawise ing HTML diposisikan ing kaca web.
Minangka conto - yen sampeyan duwe divisi sing diposisikan kanthi nggunakake nilai relatif (kita bakal katon ing nilai iki sakcepete), lan ing bagean kasebut sampeyan duwe paragraf sing pengin posisi 50 piksel saka ndhuwur divisi, sampeyan bakal nambah nilai posisi "absolut" kanggo paragraf kasebut bebarengan karo nilai offset 50px ing "ndhuwur" properti, kaya iki.
posisi: Absolute; ndhuwur: 50px;Unsur iki sing ditemtokake bakal terus nampilake 50 piksel saka ing ndhuwur divisi sing relatif sing dipanggonke - ora ana alesan liya sing ana ing aliran normal. Unsur sing "pancen" sing dipigunakaké dipigunakaké minangka sing paling rélatif minangka kontèks lan nilai pangepungan sing sampeyan gunakaké relatif.
Papat sifat posisi sing sampeyan wis kasedhiya nggunakake:
- ndhuwur
- tengen
- ngisor
- kiwa
Sampeyan bisa nggunakake salah siji ndhuwur utawa ngisor (amarga unsur ora bisa dipisahake miturut angka kasebut) lan salah siji tengen utawa kiwa.
Yen sawijining unsur disetel menyang posisi absolut, nanging ora ana leluhur sing dipentungaké sacara non-statik, banjur bakal dipanggoni relatif marang unsur awak, kang minangka unsur tingkat paling dhuwur ing kaca kasebut.
Posisi Relatif
Kita wis kasebut posisi relatif, supaya saiki katon ing properti saiki.
Posisi relatif migunakaké papat posisi sing padha minangka posisi absolut, nanging tinimbang posisi posisi unsur kasebut sajroning leluhur sing paling ora bisa dipisahaké, mula saka ngendi unsur kasebut bakal isih ana ing aliran normal.
Contone, yen sampeyan duwe telung paragraf ing kaca web sampeyan, lan pihak katelu nduweni gaya "posisi: relatif" diselehake, posisi kasebut bakal diimbangi adhedhasar lokasi saiki.
Paragraf 1.
Paragraf 2.
Ayat 3.
Ing conto ndhuwur, paragraf katelu bakal dipanggonke 2em saka sisih kiwa unsur wadhah, nanging isih ana ing sangisore rong paragraf pisanan. Iku bakal tetep ing aliran normal saka dokumen, lan mung bakal diimbangi rada. Yen diganti dadi posisi: Absolute; apa wae sing bakal ditampilake ing ndhuwur, amarga bakal ora ana maneh ing aliran normal dokumen kasebut.
Unsur ing kaca web asring digunakake kanggo ngeset nilai posisi: relatif tanpa nilai offset diadegaké, sing tegese unsur tetep persis ing ngendi bakal katon ing aliran normal. Iki rampung mung kanggo netepake unsur kasebut minangka konteks marang unsur liyane sing bisa dipanggoni pancen. Contone, yen sampeyan duwe divisi sing nyakup kabeh situs web kanthi nilai kelas "wadah" (sing dadi skenario umum ing desain web), divisi iki bisa disetel menyang posisi relatif supaya samubarang ana ing sajrone bisa digunakake minangka konteks posisi.
Apa Babagan Posisi Tetap?
Posisi tetep akeh kaya posisi absolut. Posisi unsur dikalkulasikan kanthi cara sing padha karo model absolut, nanging unsur tetep banjur dianyari ing lokasi kasebut - meh kaya watermark . Kabeh liya ing kaca banjur bakal nggulung unsur kasebut.
Kanggo nggunakake nilai properti, sampeyan bakal nemtokake:
posisi: tetep;Elinga, yen sampeyan ndandani unsur ing situs sampeyan, bakal dicithak ing lokasi kasebut nalika kaca Web wis dicithak. Contone, yen unsur sampeyan tetep ana ing sisih ndhuwur kaca, bakal katon ing sisih ndhuwur saben kaca sing dicithak - amarga kasebut tetep ing sisih ndhuwur kaca. Sampeyan bisa nggunakake jinis media kanggo ngganti cara kaca cetak ditampilake unsur sing tetep:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 1/7/16.