CSS Position
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.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
© 2025 ReadyTools. Minden jog fenntartva.