CSS pozicioniranje je več kot zgolj X, Y koordinate
Postavitev CSS je že dolgo pomemben del oblikovanja spletnih strani. Tudi z razvojem novejših tehnik postavitve CSS, kot so Flexbox in CSS Grid, je pozicioniranje še vedno pomembno mesto v vsakem spletnem oblikovalcem vrečah trikov.
Pri uporabi pozicioniranja CSS je prva stvar, ki jo boste morali storiti, je določiti lastnost CSS za položaj, ki bo povedala brskalniku, če boste za določen element uporabljali absolutno ali relativno pozicioniranje. Prav tako morate jasno razumeti razliko med tema dvema pozicionirnima lastnostima.
Medtem ko sta absolutni in relativni dve lastnosti pozicij CSS, ki se najpogosteje uporabljajo v spletnem oblikovanju, dejansko obstajajo štiri države, ki se nanašajo na pozicijsko lastnost:
- statično
- absolutno
- relativno
- določen
Statična je privzeta pozicija za kateri koli element na spletni strani. Če ne določite položaja elementa, bo statičen. To pomeni, da se bo prikazal na zaslonu glede na to, kje je v dokumentu HTML in kako bi se prikazal znotraj običajnega toka tega dokumenta.
Če uporabite pravila za pozicioniranje, na primer zgoraj ali levo, do elementa, ki ima statični položaj, bodo ta pravila prezrte in element ostane tam, kjer se prikaže v normalnem toku dokumenta. V resnici bi morali redko, če kdajkoli, postaviti element v statični položaj v CSS, ker je to privzeta vrednost.
Absolutno pozicioniranje CSS
Absolutno pozicioniranje je verjetno najlažji položaj CSS za razumevanje. Začnete s to lastnostjo CSS-ja:
položaj: absolutno;Ta vrednost govori brskalniku, da je treba karkoli, ki naj bi bil postavljen, odstraniti iz običajnega pretoka dokumenta in ga umestiti na točno lokacijo na strani. To se izračuna na podlagi najbližjega ne-statično postavljenega prednika tega elementa.
Ker je absolutno postavljen element izvzet iz običajnega pretoka dokumenta, to ne bo vplivalo na to, kako se elementi, pred njim ali po njem, nahajajo na spletni strani.
Kot primer - če ste imeli delitev, ki je bila postavljena z uporabo relativne vrednosti (to vrednost bomo kmalu videli), v notranjosti te razdelke pa ste imeli odstavek, na katerega želite postaviti 50 slikovnih pik z vrha razdelka bi dodal pozicijsko vrednost "absolutnega" v tem odstavku skupaj z izravnalno vrednostjo 50 pik na "vrhu" lastnosti, kot je ta.
položaj: absolutno; na vrh: 50px;Ta absolutno postavljeni element bi potem vedno prikazoval 50 slikovnih pik z vrha tega sorazmerno nameščenega oddelka - ne glede na to, kaj se tam prikaže v normalnem toku. Vaš "absolutno" postavljeni element je uporabil sorazmerno pozicionirano kot svoj kontekst in vrednost, ki jo uporabljate, relativna, da je to.
Štiri lastnosti pozicioniranja, ki jih lahko uporabite, so:
- na vrh
- prav
- spodaj
- levo
Uporabite lahko zgoraj ali spodaj (ker elementa ni mogoče postaviti glede na obe vrednosti) in desno ali levo.
Če je element nastavljen na absolutni položaj, vendar tam nima nobenih ne-statičnih položajev, se bo postavil glede na element telesa, ki je element najvišje ravni strani.
Relativno pozicioniranje
Smo že omenili relativno pozicioniranje, zato si oglejmo to lastnost zdaj.
Relativno pozicioniranje uporablja enake štiri pozicionirne lastnosti kot absolutno pozicioniranje, temveč namesto, da bi pozicijo elementa zasnovalo na najbližjem nestavsko postavljenem predniku, se začne od mesta, kjer bi bil element, če bi bil še vedno v normalnem toku.
Na primer, če imate na svoji spletni strani trije odstavki, tretji pa ima na sliki položaj »relativni«, se bo položaj izravnal na podlagi trenutne lokacije.
Odstavek 1.
2. odstavek
3. odstavek
V zgornjem primeru bo tretji odstavek postavljen 2em od leve strani elementa vsebnika, vendar bo še vedno pod prvima dvema odstavkoma. Ostala bi bila v normalnem toku dokumenta in bi bila rahlo poravnana. Če ste ga spremenili v položaj: absolutno; vse, kar bi sledilo, bi se prikazalo na vrhu, ker ne bi bilo več v normalnem toku dokumenta.
Elementi na spletni strani se pogosto uporabljajo za nastavitev vrednosti položaja: relativnega, brez izravnane vrednosti, kar pomeni, da ta element ostane točno tam, kjer se bo pojavil v normalnem toku. To se naredi izključno za določitev tega elementa kot konteksta, na podlagi katerega se drugi elementi lahko popolnoma postavijo. Na primer, če imate delitev, ki obdaja vašo celotno spletno mesto z razredno vrednostjo »vsebnika« (kar je zelo pogost scenarij v spletnem oblikovanju), se ta delitev lahko nastavi na položaj relativnega, tako da lahko kar koli znotraj kot pozicioniranje.
Kaj o določenem položaju?
Fiksno pozicioniranje je veliko kot absolutno pozicioniranje. Položaj elementa se izračuna na enak način kot absolutni model, vendar so fiksni elementi na tem mestu določeni - skoraj kot vodni žig . Vse drugo na strani se nato premika po tem elementu.
Če želite uporabiti to vrednost lastnosti, nastavite:
položaj: določen;Ne pozabite, ko na spletnem mestu popravite element, bo tiskal na tej lokaciji, ko bo natisnjena vaša spletna stran. Če je na primer vaš element pritrjen na vrhu vaše strani, se bo pojavil na vrhu vsake natisnjene strani - ker je pritrjen na vrh strani. Uporabite lahko vrste medijev, da spremenite, kako natisnjene strani prikažejo določene elemente:
@media zaslon {h1 # prvi {položaj: določen; }} @media print {h1 # prvi {položaj: statičen; }}Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 1/7/16.