MagyarmagyarElemek pozíciója (V4)
Statikus, relatív, abszolút, rögzített és tapadó pozíció, Z-index és horgonyeltolás az atomikus elemeken.
A Pozíció szekcióval pontosan megadhatod, hol helyezkedjen el az elem a képernyőn, és az elemeket egymás fölé is rétegezheted. A szekció a V4 (atomikus) elemek Stílus fülén van.
A képen az abszolút pozíció mezői látszanak: négy irány szerinti távolság, a Z-index és a Horgonyeltolás.
A pozíció fajtái
Szekció neve “A pozíció fajtái”A Pozíció legördülő listájában ezek közül választhatsz:
| Fajta | Mit csinál |
|---|---|
| Statikus | Az alapérték. Az elem ott marad, ahová elhelyezted. Statikus pozíciónál nincs mód az elem helyének módosítására. |
| Relatív | Az elem az eredeti helyéhez képest mozdul el. |
| Abszolút | Az elem a legközelebbi olyan szülő elemhez képest helyezkedik el, amelynek a pozíciója Relatív. Ha nincs ilyen szülő, az oldalhoz képest. |
| Rögzített | Az elem a képernyőn rögzített helyen marad, görgetéskor sem mozdul. A számmezőkkel módosíthatod a helyét. |
| Tapadó | Az elem látható marad, amíg a látogató görget, de a szülő elemén belül. Amikor a szülő kikerül a képernyőről, az elem is eltűnik. |
Relatív, abszolút, rögzített és tapadó pozíciónál a Fent, Jobb, Lent és Bal mezőkbe adhatod meg a távolságot. Legalább az egyik mezőbe számot kell írnod, az lehet nulla is.
Abszolút pozíció, példával
Szekció neve “Abszolút pozíció, példával”A példában egy Div-blokk van egy másik Div-blokkban. Mindkettő pozíciója Relatív.
- Tegyél egy SVG elemet a belső Div-blokkba, és állítsd a pozícióját Abszolút értékre.
- Írj 0-t a Lent és 0-t a Bal mezőbe. Az SVG a belső Div-blokk bal alsó sarkába kerül.
- Állítsd a belső Div-blokk pozícióját Statikus értékre. Az SVG most a külső Div-blokkhoz igazodik, mert az a legközelebbi szülő, amelynek a pozíciója Relatív. Az SVG például a külső Div-blokk tetejétől 120 képpontra helyezkedik el.
Rögzített pozíció
Szekció neve “Rögzített pozíció”A rögzített elem a helyén marad, miközben a látogató fel-le görgeti az oldalt. A helyét a számmezőkkel adhatod meg. Például egy kép rögzített pozícióban, 20 képpontra az oldal tetejétől: Pozíció: Rögzített, Fent: 20.
Tapadó pozíció
Szekció neve “Tapadó pozíció”A tapadó elem a szülő elemén belül marad látható, ahogy a látogató görget. A Fent mező az eltolást adja meg: ha például 20 képpontot írsz bele, a címsor görgetéskor az oldal tetejétől 20 képpontra marad. Az elem addig tapad, amíg a szülő Div-blokk vagy tároló látszik, utána vele együtt eltűnik.
Z-index
Szekció neve “Z-index”A Z-index az egymás fölé rétegezett elemek sorrendjét adja meg: a nagyobb számú elem kerül felülre. A szám beírása önmagában nem látszik a vásznon, de eggyel feljebb emeli az elemet a rétegek között.
Horgonyeltolás
Szekció neve “Horgonyeltolás”A horgonyeltolás az oldalon belüli (horgony) linkekkel együtt használatos. Leggyakrabban akkor kell, ha az oldal tetején tapadó webhelyrész van, például menü, amely az oldal egy későbbi elemére mutat. Előfordulhat, hogy a link célja túlságosan feljebb görgetődik, és a tapadó rész alá kerül.
A Horgonyeltolás azt éri el, hogy a célelem az oldal tetejétől megadott távolságra jelenjen meg.
Példa a horgonyeltolásra
Szekció neve “Példa a horgonyeltolásra”A példában egy tároló az oldal tetejétől 120 képpontra jelenik meg.
- Hozz létre egy oldalt tapadó fejléccel és alatta két tárolóval. A menüben legyen egy „Horgony” nevű elem, amely a második tárolóra mutat.
- Ha ilyenkor a menüben a „Horgony” elemre kattintasz, a második tároló teteje a tapadó fejléc alá kerül.
- A szerkesztőben kattints a második tárolóra, hogy kijelöld.
- Kattints a Stílus fülre.
- Nyisd ki a Pozíció szekciót.
- A Horgonyeltolás mezőbe írj 120-at.
- Kattints a Közzététel gombra.
Ezután ha a menüben a „Horgony” elemre kattintasz, a tároló az oldal tetejétől 120 képpontra jelenik meg.
Készült: