Pozíció - CSS-trükkök | CSS Almanach 2025

A positiontulajdonság segíthet az elem helyének manipulálásában, például:

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

Eredeti helyzetéhez viszonyítva a fenti elemet most felülről 20px-rel el fogja tolni. Ha animálnánk ezeket a tulajdonságokat, láthatjuk, hogy ez mekkora kontrollt ad nekünk (bár ez nem jó ötlet teljesítményi okokból):

relativecsak az egyik a positiontulajdonság hat értékéből . Itt vannak a többiek:

Értékek

static: alapértelmezés szerint minden elemnek statikus pozíciója van, ezért az elem ragaszkodni fog a normál oldalfolyamhoz. Tehát, ha van egy bal / jobb / felső / alsó / z-index készlet, akkor nincs hatással az elemre.
relative: egy elem eredeti helyzete az staticértékhez hasonlóan a dokumentum folyamatában marad . De most a bal / jobb / felső / alsó / z-index működni fog. A helyzeti tulajdonságok az elemet az eredeti helyzetből „tolják el” ebben az irányban.
absolute: az elem eltávolításra kerül a dokumentum folyamatából, és más elemek úgy fognak viselkedni, mintha ott sem lenne, miközben az összes többi helyzeti tulajdonság működni fog rajta.
fixed: az elem eltávolításra kerül a dokumentum folyamatából, mint az abszolút helyzetben lévő elemek. Valójában szinte ugyanúgy viselkednek, csak a rögzítetten elhelyezett elemek viszonyulnak mindig a dokumentumhoz, nem egy adott szülőhöz, és a görgetés nem érinti őket.
sticky(kísérleti): az elemet úgy kezeljük, mint egy relativeértéket, amíg a nézet görgetési helye el nem éri a megadott küszöbértéket, ekkor az elem olyan fixedhelyzetbe kerül, ahol azt mondják, hogy ragaszkodjon hozzá.
inherit: az positionérték nem lép fel kaszkádon, így ez arra használható, hogy kifejezetten rá kényszerítse, és inherita pozícionálási értéket a szülőjétől.

Abszolút

Ha egy gyermekelemnek van absoluteértéke, akkor a szülőelem úgy fog viselkedni, mintha a gyermek egyáltalán nincs ott:

.element ( position: absolute; )

És amikor megpróbálunk más értékeket beállítani, például left,, bottomés rightazt tapasztaljuk, hogy a gyermek elem nem a szülő méreteire reagál, hanem a dokumentumra:

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

Ahhoz, hogy a gyermek elem abszolút a szülő elemétől legyen pozicionálva, ezt magának a szülő elemnek kell beállítanunk:

.parent ( position: relative; )

Most tulajdonságok, mint például left, right, bottomés topakkor nézze meg a szülő elem, hogy ha teszünk a gyermek elem átlátszó látjuk, hogy ül az alján a szülő:

Rögzített

Az fixedérték hasonló ahhoz absolute, mivel segíthet egy elem bárhol történő elhelyezésében a dokumentumhoz képest, azonban a görgetés ezt az értéket nem befolyásolja. Nézze meg a gyermek elemet az alábbi bemutatóban, és hogyan gördül tovább az oldal aljára:

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm	Firefox	AZAZ	Él	Szafari
4	2	7	12.	3.1

Mobil / Tablet

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

Ragadós

Az stickyérték olyan, mint egy kompromisszum az relativeés az fixedértékek között. Az írástól kezdve jelenleg kísérleti érték, vagyis nem része a hivatalos specifikációnak, és csak bizonyos böngészők fogadják el. Más szavakkal, valószínűleg nem a legjobb ötlet, hogy ezt élő produkciós weboldalon használják.

Mit csinal? Nos, ez lehetővé teszi, hogy egy elemet a dokumentumban lévő bármelyihez viszonyítva pozícionáljon, majd miután a felhasználó átgördült a nézetablak egy bizonyos pontján, rögzítse az elem pozícióját erre a helyre, hogy az állandóan megjelenjen, mint egy elem egy fixedérték.

Vegyük a következő példát:

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

Az elem viszonylag addig helyezkedik el, amíg a nézetablak görgetési helye el nem éri azt a pontot, ahol az elem 50pxa nézetablak tetejétől lesz . Ezen a ponton az elem ragadóssá válik, és továbbra is a fixedpozíció 50pxa képernyő tetején.

A következő bemutató szemlélteti azt a pontot, ahol a felső navigáció az alapértelmezett relativehelymeghatározás, a második navigáció pedig stickya nézetablak legtetején van beállítva . Felhívjuk figyelmét, hogy a bemutató csak a Chrome-ban, a Safari-ban és az Operában fog működni az írás idején.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.