CSS Position

CSS Minimum és Maximum értékek CSS Z-index

A position tulajdonság határozza meg, hogyan helyezkedjen el egy elem a dokumentumáramlásban. Ez az egyik legfontosabb eszköz a layout és az elrendezés finomhangolására.

Position értékek

A CSS position többféle értéket vehet fel, mindegyik más és más működéssel rendelkezik az elrendezésben.

Érték	Leírás
static	Alapértelmezett érték. Az elem a dokumentum normál áramlásában helyezkedik el.
relative	Az elem a normál helyzetéhez képest mozdul el, a top, left, right, bottom értékek szerint.
absolute	Az elem az első nem statikus szülőhöz képest pozícionálódik.
fixed	Az elem a böngésző ablakhoz képest fixen helyezkedik el, görgetésnél nem mozog.
sticky	Az elem görgetés közben egy ideig fixen marad, majd visszatér a normál áramláshoz.

Abszolút pozícionálás

Az abszolút pozícionálás lehetővé teszi, hogy pontosan megadd, hova kerüljön egy elem a szülő konténerén belül.

A fenti példában a piros doboz a szürke szülődoboz jobb felső sarkába van pozícionálva.

Sticky pozíció

A sticky pozíció hasznos lehet navigációs sávoknál, mivel az elem a görgetés közben a képernyő tetején marad, majd visszatér az áramláshoz.

Tippek a position használatához

A position helyes használata elengedhetetlen a precíz és reszponzív elrendezések készítéséhez.

Mindig adj meg position: relative-et a szülőnek, ha absolute gyereket akarsz pozícionálni.
A fixed pozíciót óvatosan használd, mert elfedheti a tartalmat görgetés közben.
A sticky különösen hasznos a navigációs sávoknál és fejléceknél.