Položaj - CSS-trikovi | CSS Almanah 2025

positionSvojstvo može pomoći da manipuliraju položaj elementa, na primjer:

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

U odnosu na svoj izvorni položaj, gornji element sada će biti gurnut odozgo za 20 piksela. Ako bismo animirali ova svojstva, možemo vidjeti koliko nam to daje kontrolu (iako ovo nije dobra ideja iz razloga izvedbe):

relativeje samo jedna od šest vrijednosti za positionsvojstvo. Evo ostalih:

Vrijednosti

static: svaki element prema zadanim postavkama ima statički položaj, tako da će se element držati normalnog toka stranice. Dakle, ako postoji postavljen indeks lijevo / desno / gore / dolje / z-indeks, tada neće biti učinka na taj element.
relative: izvorni položaj elementa ostaje u tijeku dokumenta, baš kao i staticvrijednost. Ali sada će raditi lijevi / desni / gornji / donji / z-indeks. Pozicijska svojstva "potiskuju" element s izvornog položaja u tom smjeru.
absolute: element je uklonjen iz tijeka dokumenta, a ostali će se elementi ponašati kao da ga čak nema, dok će sva ostala pozicijska svojstva raditi na njemu.
fixed: element je uklonjen iz toka dokumenta poput apsolutno pozicioniranih elemenata. Zapravo se ponašaju gotovo isto, samo su fiksno postavljeni elementi uvijek u odnosu na dokument, a ne bilo koji određeni roditelj, i pomicanje na njih ne utječe.
sticky(eksperimentalno): element se tretira kao relativevrijednost sve dok mjesto pomicanja vidnog polja ne dosegne zadani prag, u kojem trenutku element zauzima fixedpoložaj u kojem mu se kaže da se drži.
inherit: positionvrijednost se ne slaže, pa se ovo može koristiti za inheritnjezino posebno prisiljavanje i pozicioniranje vrijednosti roditelja.

Apsolutno

Ako podređeni element ima absolutevrijednost, tada će se nadređeni element ponašati kao da dijete uopće nije tamo:

.element ( position: absolute; )

A kad smo pokušati postaviti druge vrijednosti, kao što su left, bottomi rightmi ćemo naći da element dijete reagira ne dimenzijama svojih roditelja, ali dokument:

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

Da bi se podređeni element apsolutno pozicionirao iz nadređenog elementa, moramo to postaviti na samom nadređenom elementu:

.parent ( position: relative; )

Sada svojstva kao što su left, right, bottomi topodnosit će se na matičnom elementu, tako da ako bi dijete elementa transparentan možemo vidjeti da sjedi na dnu roditelja:

Fiksno

fixedVrijednost slična absolutekao što to može pomoći da postavite element bilo gdje u odnosu na dokument, međutim, ta vrijednost je nepromijenjen od pomicanja. Pogledajte podređeni element u demonstraciji u nastavku i kako se, nakon što se pomaknete, nastavlja lijepiti na dnu stranice:

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom	Firefox	IE	Rub	Safari
4	2	7	12	3.1

Mobitel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Ljepljiv

stickyVrijednost je kao kompromis između relativete fixedvrijednosti. Od ovog pisanja, to je trenutno eksperimentalna vrijednost, što znači da nije dio službene specifikacije i samo su ga djelomično prihvatili odabrani preglednici. Drugim riječima, vjerojatno nije najbolja ideja koristiti ovo na web mjestu uživo produkcije.

Što to radi? Pa, omogućuje vam pozicioniranje elementa u odnosu na bilo što u dokumentu, a zatim, nakon što se korisnik pomakne kroz određenu točku u prozoru, popravite položaj elementa na tom mjestu tako da ostaje uporno prikazan poput elementa s fixedvrijednost.

Uzmimo sljedeći primjer:

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

Element će biti relativno pozicioniran dok mjesto pomicanja okvira za prikaz ne dosegne točku na kojoj će element biti 50pxs vrha okvira za prikaz. U tom trenutku element postaje ljepljiv i ostaje na fixedpoložaju na 50pxvrhu zaslona.

Sljedeći prikaz ilustrira tu točku, gdje je gornja navigacija zadano relativepozicioniranje, a druga je postavljena stickyna sam vrh okvira za prikaz. Imajte na umu da će demonstracija raditi samo u Chromeu, Safariju i Operi u vrijeme pisanja ovog članka.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.