# Elemek 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 Pozíció szekció abszolút pozícióval: Fent, Jobb, Lent, Bal, Z-index és Horgonyeltolás](./kepek/stilus-pozicio-abszolut.webp)

*A Pozíció szekció abszolút pozícióval: Fent, Jobb, Lent, Bal, Z-index és Horgonyeltolás* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

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

A **Pozíció** legördülő listájában ezek közül választhatsz:

![A Pozíció legördülő listája: Statikus, Relatív, Abszolút, Rögzített, Tapadó](./kepek/stilus-pozicio-lista.webp)

*A Pozíció legördülő listája: Statikus, Relatív, Abszolút, Rögzített, Tapadó* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| 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

A példában egy Div-blokk van egy másik Div-blokkban. Mindkettő pozíciója **Relatív**.

1. Tegyél egy SVG elemet a belső Div-blokkba, és állítsd a pozícióját **Abszolút** értékre.
2. Írj 0-t a **Lent** és 0-t a **Bal** mezőbe. Az SVG a belső Div-blokk bal alsó sarkába kerül.
3. Á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.

> **Tipp**
>
> Az abszolút pozícióval úgy teheted egy elem fölé a másikat, hogy közben nem használsz margót. Például ha egy címsor egy kép felett van, és a kép tetejére szeretnéd tenni: állítsd a címsor pozícióját **Abszolút** értékre, a **Z-index** legyen 1 vagy több, majd a **Fent** és **Bal** mezőkbe írj olyan számokat, amíg a címsor a kép megfelelő helyére kerül. Az abszolút pozícionáláshoz ne használj margót.

## 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ó

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.

> **Megjegyzés**
>
> A 4-es verziótól az Elementor a JavaScript helyett a CSS tapadó tulajdonságát használja. Ez könnyebb és gyorsabb, de nem működik, ha a szülő elem **Túlcsordulása** **Rejtett**. A túlcsordulásról lásd: [Elemek mérete (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/).

## 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

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

A példában egy tároló az oldal tetejétől 120 képpontra jelenik meg.

1. 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.
2. Ha ilyenkor a menüben a „Horgony" elemre kattintasz, a második tároló teteje a tapadó fejléc alá kerül.
3. A szerkesztőben kattints a második tárolóra, hogy kijelöld.
4. Kattints a **Stílus** fülre.
5. Nyisd ki a **Pozíció** szekciót.
6. A **Horgonyeltolás** mezőbe írj 120-at.
7. 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.