Položaj - CSS-triki | Almanah CSS 2025

positionLastnost lahko pomaga manipulirati lokacijo elementa, na primer:

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

Glede na prvotni položaj bo zgornji element zdaj z vrha potisnjen navzdol za 20 slikovnih pik. Če bi animirali te lastnosti, lahko vidimo, koliko nadzora nam to daje (čeprav to zaradi razlogov uspešnosti ni dobra ideja):

relativeje le ena od šestih vrednosti positionlastnosti. Tu so še:

Vrednote

static: vsak element ima privzeto statičen položaj, zato se bo element držal običajnega pretoka strani. Torej, če je nastavljen indeks levo / desno / zgoraj / spodaj / z, potem na ta element ne bo nobenega učinka.
relative: prvotni položaj elementa ostane v toku dokumenta, tako kot staticvrednost. Zdaj pa bo delovalo levo / desno / zgoraj / spodaj / z-indeks. Pozicijske lastnosti elementa potiskajo iz prvotnega položaja v to smer.
absolute: element je odstranjen iz toka dokumenta, drugi elementi pa se bodo obnašali, kot da ga sploh ni, medtem ko bodo vse druge pozicijske lastnosti delovale na njem.
fixed: element je odstranjen iz toka dokumenta kot popolnoma postavljeni elementi. Pravzaprav se obnašajo skoraj enako, le fiksno postavljeni elementi so vedno v zvezi z dokumentom, ne s katerim koli nadrejenim, in drsenje nanje ne vpliva.
sticky(eksperimentalno): element se obravnava kot relativevrednost, dokler mesto drsenja vidnega polja ne doseže določenega praga, na katerem element zavzame fixedpoložaj, kjer mu je naročeno, da se drži.
inherit: positionvrednost ni kaskadna, zato jo lahko uporabimo za to, da jo prisilimo, in inheritpozicijsko vrednost nadrejenega elementa.

Absolutno

Če ima podrejeni element absolutevrednost, se bo nadrejeni element obnašal, kot da otroka sploh ni:

.element ( position: absolute; )

In ko smo poskušali določiti druge vrednosti, kot so left, bottomin rightbomo ugotovili, da je otrok element se ne odziva na dimenzije svojega starša, vendar dokument:

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

Če želimo, da se podrejeni element popolnoma postavi iz nadrejenega elementa, moramo to nastaviti na sam nadrejeni element:

.parent ( position: relative; )

Zdaj lastnosti, kot so left, right, bottomin topse nanašajo na matično element, tako da če bo otrok element pregleden lahko vidimo, da sedi na dnu staršev:

Fiksno

fixedVrednost je podobna absolute, saj lahko pomaga postaviti element kjerkoli relativno na dokument, vendar pa je ta vrednost ne vpliva pomikanjem. Oglejte si podrejeni element v spodnji predstavitvi in kako se, ko se pomaknete, še naprej drži na dnu strani:

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome	Firefox	IE	Rob	Safari
4.	2.	7.	12.	3.1

Mobilni / tablični računalnik

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3.	8.

Lepljivo

stickyVrednost je kot kompromis med relativein fixedvrednot. Od tega pisanja je trenutno eksperimentalna vrednost, kar pomeni, da ni del uradnih specifikacij in je le delno sprejet v izbranih brskalnikih. Z drugimi besedami, verjetno ni najboljša ideja, če bi to uporabili na spletnem mestu produkcije v živo.

Kaj to naredi? No, omogoča vam, da postavite element glede na kar koli v dokumentu in nato, ko se uporabnik pomakne mimo določene točke v pogledu, popravite položaj elementa na tej lokaciji, tako da ostane trajno prikazan kot element z fixedvrednost.

Vzemimo naslednji primer:

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

Element bo razmeščen razmeroma dolgo, dokler se mesto drsenja vidnega polja ne doseže do točke, kjer bo element 50pxz vrha vidnega polja. Takrat element postane lepljiv in ostane na fixedpoložaju na 50pxvrhu zaslona.

Naslednja predstavitev prikazuje to točko, kjer je zgornja navigacija privzeto relativepozicioniranje, druga navigacija pa nastavljena stickyna sam vrh vidnega polja. Upoštevajte, da bo predstavitev v času pisanja tega dokumenta delovala samo v brskalnikih Chrome, Safari in Opera.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.