CSS-lokaasje is mear as just X, Y Koördinearret
CSS-posysje is al in wichtich ûnderdiel fan webside-layouts. Sels mei de opkomst fan nije CSS-layouttechniken lykas Flexbox en CSS Grid, hat de posysje noch altyd in wichtich plak yn in web-ûntwerp de tas fan trikken.
Wannear't jo CSS-posysje brûke, it earste ding dat jo nedich hawwe, is it CSS-eigenskip opsette foar posysje om de browser te fertellen as jo absolute of relatyf-posysje foar in bepaald elemint brûke. Jo moatte ek it ferskil tusken dizze twa posysje-eigenskippen dúdlik begripe.
Hoewol absolút en relatyf binne de twa CSS-posysje-eigenskippen dy't meastentiids yn web-ûntwerp brûkt wurde, binne der fjirde faktoren op it posysje eigendom:
- static
- absolút
- relative
- fêst
Static is de standert posysje foar elke elemint op in webside. As jo de posysje fan in elemint net definiearje, sil it statysk wêze. Dit betsjut dat it op it skerm werjaan sil basearre op wêr't it yn it HTML-dokumint is en hoe't it yn 'e normale stream fan dat dokumint werjaan soe.
As jo posysje regels tapast as top of lofts nei in elemint dat in statyske posysje hat, dan wurde dizze regels ignorearre en it elemint sil bliuwe wêr't it yn normale dokumint fljocht ferskynt. Yn wierheid moatte jo selden, as ea, in elemint sette oan in statyske posysje yn CSS, om't dat de standertwearde is.
Absolute CSS Positioning
Absolute posysjeing is wierskynlik it maklikste CSS-posysje om te begripen. Jo begjinne mei dizze CSS-posysje eigendom:
posysje: absolute;Dizze wearde fertelt de blêder dat elkenien werpene wurde moat wurde fuortsmiten fan 'e normale stream fan it dokumint en yn plak fan in krekte lokaasje op' e side. Dit wurdt berekkene basearre op it elemint dat it tastânste net-statysk opsetteur is.
Omdat in absolute posysje-elemint út 'e normale stream fan' e dokumint ôfnommen wurdt, sil it net beynfloedzje hoe't de eleminten foardat it of nei dêrnei yn it HTML positionearre binne op 'e webside.
As foarbyld - as jo in ôfdieling hawwe dy't opsetten hat in wearde fan relatyf (wy sille dizze wearde koart starte), en yn dy divyzje hawwe jo in paragraaf dat jo 50 piksels fan 'e top fan' e divyzje stelle wolle, jo soe in posysjewearde fan "absolute" oan dy paragraaf tafoegje mei in offsetwearde fan 50px op 'e "top" eigendom, sa as dit.
posysje: absolute; top: 50px;Dit absolute posisjoneel elemint sil dan altyd 50 piksels fan 'e top fan dy relatyf lytse ôfdieling sjen litte - krekt wat wat oars yn it normale stream sjen lit. Jo "absolute" positionearre elemint brûkt it relatyf plakearre as har kontekst en de posysje wearde dy't jo brûke is relatyf dat.
De fjouwer posisjonele eigenskippen dy't jo beskikber hawwe binne te brûken:
- top
- rjochts
- boaiem
- links
Jo kinne gebrûk meitsje fan top of bottom (om't in elemint neffens beide wearden net opslein wurde kin) en rjocht of links.
As in elemint op in posysje fan absolút set wurdt, mar dêr hat it gjin statistyske foarâlden steld, dan sil it relative wurde oan it lichem-elemint, dat is it heechste nivo-elemint fan 'e side.
Relative posysjeing
Wy hawwe al harsels relatearre posysje neamd, dus litte wy dit eigendom no sjen.
Relative posysjesjen brûkt itselde fjouwer posysje-eigenskippen as absolute posysjeing, mar ynstee fan it stânpunt fan it elemint op syn tichtebyste net-statysk opsette foarâlder, begjint it út wêr 't it elemint wêze soe as it noch yn' e normale stream is.
As jo bygelyks trije paragrafen hawwe op jo webside, en de tredde hat in "posysje: relatyf" styl op him pleatst, sil it posysje kompensearre wurde basearre op it hjoeddeistige lokaasje.
Yn it boppeneamde foarbyld sil de tredde lid 2em fan 'e linker kant fan it container elemint pleatse, mar sil noch ûnder de earste twa paragrafen wêze. It soe bliuwend yn 'e normale stream fan it dokumint, en gewoan omset wurde wat. As jo it feroare feroare: absolute; Alles wat folgje, soe it boppe-oan sjen, want it soe net mear wêze yn 'e normale stream fan it dokumint.
Eleminten op in webside wurde faak brûkt om in wearde fan posysje te stellen: relatyf sûnder offsetwearde fêst, wat betsjut dat elemint krekt krekt wêr't it ferskynt yn normale stream. Dit wurdt allinnich dien om dit elemint te fêstigjen as in kontekst dêr't oare eleminten folslein op pleatst wurde. As jo bygelyks in ôfdieling om jo hiele webside hawwe mei in klassewearde fan "container" (dat in tige mienskiplik senario yn webûntwerp is), kin dizze divyzje yn in posysje fan relatyf stelle wurde sadat alles wat binnen it kin brûke it as posysjekontext.
Wat oer steatposysje?
Fêste posysje is in soad as absolute posysjeing. De posysje fan it elemint wurdt berekkene op deselde wize as it absolute model, mar fêste eleminten wurde dan op dat plak stean - hast as in watermark . Alles wat op 'e side sil dan efter elkoar elemint scrollen.
Om dizze Eigenskipwearde te brûken, sette jo:
posysje: fêst;Tink derom, as jo in elemint opstelle op jo side, sil it drukke op dizze lokaasje as jo webside útdrukt wurdt. As jo bygelyks jo elemint op 'e boppekn fan jo side fêststeld, sil it boppe-oan elke gedachte side ferskine - om't it fêst stiet oan' e top fan 'e side. Jo kinne mediatypen brûke om te feroarjen hoe't de drukke siden fêste eleminten werjaan:
@media skerm {h1 # earste {posysje: fêst; }} @media print {h1 # earste {posysje: statysk; }}Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 1/7/16.