Asend - CSS-trikid | CSS-i almanahh 2025

positionVara aitab teil manipuleerida asukoha elemendi, näiteks:

.element ( position: relative; top: 20px; )

Algse positsiooni suhtes nihutatakse ülalolevat elementi nüüd ülevalt alla 20 pikslit. Kui peaksime neid omadusi animeerima, näeme, kui palju kontrolli see meile annab (kuigi see pole jõudluse huvides hea mõte):

relativeon vaid üks positionatribuudi kuuest väärtusest . Siin on teised:

Väärtused

static: igal elemendil on vaikimisi staatiline asend, nii et element jääb tavalise lehevoo juurde. Nii et kui on seatud vasak / parem / ülemine / alumine / z-indeks, siis sellele elemendile mõju ei ole.
relative: elemendi algne asukoht jääb dokumendi voogu, nagu ka staticväärtus. Kuid nüüd vasak / parem / ülemine / alumine / z-indeks töötab. Asendiomadused nihutavad elementi selles suunas algsest positsioonist.
absolute: element eemaldatakse dokumendi voost ja teised elemendid käituvad nii, nagu poleks seda isegi seal, samal ajal kui kõik muud positsioonilised omadused töötavad sellel.
fixed: element eemaldatakse dokumendi voost nagu absoluutselt paigutatud elemendid. Tegelikult käituvad nad peaaegu samamoodi, ainult fikseeritud paigutatud elemendid on alati dokumendi suhtes, mitte ükski konkreetne vanem, ja kerimine neid ei mõjuta.
sticky(eksperimentaalne): elementi käsitletakse kui relativeväärtust seni, kuni vaateava kerimiskoht saavutab määratud künnise, kusjuures element võtab fixedpositsiooni, kus tal kästakse kinni jääda.
inherit: positionväärtus ei kaskaadne, nii et seda saab kasutada selleks, et seda konkreetselt sundida, ja inheritpositsioneerimisväärtust selle vanemalt.

Absoluutne

Kui alamelemendil on absoluteväärtus, käitub vanemelement nii, nagu last poleks seal üldse:

.element ( position: absolute; )

Ja kui proovime seada muid väärtusi, näiteks left, bottomja rightleiame, et alamelement vastab mitte vanema mõõtmetele, vaid dokumendile:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Alamelemendi absoluutseks positsioneerimiseks vanemelemendist peame selle seadma vanemelemendile endale:

.parent ( position: relative; )

Nüüd omadused nagu left, right, bottomja topviitavad vanem element, nii et kui me teeme lapse element läbipaistev näeme seda istub allosas vanem:

Parandatud

fixedVäärtus on sarnane absolute, sest see aitab teil paigutada element kõikjal võrreldes dokumendi aga see väärtus ei muutu, kerides. Vaadake allolevas demos alamelementi ja kuidas see kerides jääb lehe allserva:

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome	Firefox	IE	Edge	Safari
4	2	7	12	3.1

Mobiil / tahvelarvuti

Android Chrome	Android Firefox	Android	iOS-i Safari
88	85	3	8

Kleepuv

stickyVäärtus on nagu kompromiss relativeja fixedväärtusi. Selle kirjutise seisuga on see praegu eksperimentaalne väärtus, mis tähendab, et see ei kuulu ametliku spetsifikatsiooni hulka ja on valitud brauserite poolt ainult osaliselt vastu võetud. Teisisõnu, pole ilmselt parim mõte seda otseülekande veebisaidil kasutada.

Mida see teeb? Noh, see võimaldab teil elemendi paigutada dokumendi mis tahes elemendi suhtes ja seejärel, kui kasutaja on kerimisvaates teatud punktist mööda kerinud, fikseerige elemendi asukoht sellesse kohta, nii et see jääks püsivalt kuvatavaks nagu element koos fixedväärtus.

Võtke järgmine näide:

.element ( position: sticky; top: 50px; )

Element paikneb suhteliselt seni, kuni vaateava kerimiskoht jõuab punkti, kus element asub 50pxvaateava ülaosast. Sel hetkel, element muutub kleepuvaks ja püsib fixedseisukoht 50pxekraani ülaservas.

Järgmine demo illustreerib seda punkti, kus ülemine navigeerimine on vaikeasukoha määramine relativeja teine navigeerimine on seatud stickyvaateava kõige ülaossa. Pange tähele, et demo töötab selle kirjutamise ajal ainult Chrome'is, Safaris ja Operas.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.