# A widgetet valami eltakarja

> Mit ellenőrizz, ha egy widget, gomb, legördülő menü vagy kép egy másik elem mögé kerül: Z-index, negatív margó, mozgáshatások és egyedi CSS.

Előfordulhat, hogy egy widget, gomb, legördülő menü vagy kép részben vagy teljesen egy másik elem mögé kerül, akár a vásznon, akár az élő oldalon. Az átfedés oka általában a rétegsorrend (Z-index), a térközök módosítása, valamilyen animáció vagy egy felülíró CSS-pozíció. Az alábbi négy ellenőrzés sorban végigvezet a megoldáson.

A takart elemet a **Szerkezet** ablakból is ki tudod jelölni (lásd: [Szerkezet ablak és jelzők](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szerkezet-ablak/)).

## 1. Z-index és rétegek

A Z-index az átfedő elemek rétegsorrendjét adja meg: a nagyobb értékű elem kerül felülre.

1. Jelöld ki a takart widgetet vagy tárolót.
2. Keresd meg a Z-index mezőt:
   - a V3 elemeknél: **Haladó → Elrendezés → Z-index**;
   - a V4 (atomikus) elemeknél: **Stílus → Pozíció → Z-index**.
3. Írj be nagyobb számot, például `10` vagy `100`.
4. Jelöld ki a fölötte lévő, takaró elemet, és ellenőrizd, hogy a Z-indexe kisebb, vagy üres (alapértelmezett).

![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 a V4 elemek **Z-index** mezője látszik a **Pozíció** szekcióban.

Ha magán a widgeten a nagyobb Z-index nem segít, állítsd be a szülő tárolóján is: a Z-index szabályait a szülő tároló rétegkörnyezete korlátozza. A részletekről a [Rögzített pozíció widgetekhez](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-fix-pozicio/) fejezetben olvashatsz.

## 2. Nem szándékos negatív margó

A negatív margóval látványos, egymásba érő elrendezések készíthetők, de egy szomszédos tárolóra, oszlopra vagy widgetre állított negatív margó véletlenül a szomszédos elemek fölé húzhatja az elemet.

1. Nyisd meg a **Szerkezet** ablakot, hogy könnyen kijelölhesd a rétegek mögött lévő elemeket.
2. Jelöld ki a takaró elemet.
3. Nézd meg a margó beállításait:
   - V3 elemeknél: **Haladó → Elrendezés → Margó**;
   - V4 elemeknél: **Stílus → Térközök → Margó**.
4. Ellenőrizd, hogy valamelyik oldalon (főleg fent vagy lent) van-e negatív érték, például `-50px`.
5. Az **Értékek szétválasztása** (lánc) ikonnal az oldalakat külön szerkesztheted, vagy ideiglenesen állíts mindent `0`-ra, és nézd meg, megszűnik-e az átfedés.
6. Ha a negatív margó szándékos, növeld a takart widget Z-indexét az 1. lépés szerint.

A margóról bővebben: [Térköz, margó és padding](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-terkoz-margo-padding/).

## 3. Mozgáshatások és animációk

A mozgáshatások (görgetési és egéreffektek, belépő animációk) az elemet az X vagy Y tengelyen elmozdítják. Lejátszás közben vagy után az elem fizikailag átfedhet közeli widgeteket.

1. Jelöld ki a mozgó vagy átfedést okozó elemet.
2. Nyisd meg az animáció beállításait:
   - V3 elemeknél: **Haladó → Mozgási hatások**;
   - V4 elemeknél: az **Interakciók** fül.
3. Ideiglenesen távolítsd el vagy kapcsold ki az aktív interakciót (V4-ben az indító melletti X-szel), és nézd meg, visszakerül-e az elem a helyére.
4. Ha a mozgáshatásra szükség van:
   - V3-ban állítsd a nézetablak csúszkáit úgy, hogy a mozgás ne metssze a szomszédos elemeket;
   - V4-ben az interakció részleteiben állítsd a kezdő és záró százalékos értékeket, vagy az irány vezérlőit, hogy korlátozd, mennyit mozdul vagy skálázódik az elem;
   - növeld annak az elemnek a Z-indexét, amelynek az animáció teljes ideje alatt felül kell maradnia.

## 4. Egyedi CSS és abszolút pozíció

Az Elementorban, gyermektémában vagy külső bővítményben megadott egyedi CSS felülírhatja az elrendezést. A `position: absolute`, `position: relative`, `transform` vagy egyedi `z-index` tulajdonságok gyakran okoznak váratlan rétegződést.

1. Jelöld ki a takart widgetet és a szülő tárolóját.
2. Nézd meg az egyedi CSS mezőt:
   - V3 elemeknél: **Haladó → Egyedi CSS**;
   - V4 elemeknél: az elem **Stílus** fülének **Egyedi CSS** szekciója.
3. Keress pozíciót vagy térközt módosító szabályokat, például `position: absolute`, `margin-top: -100px` vagy `z-index: -1`.
4. Ideiglenesen töröld vagy tedd megjegyzésbe a kódot, és nézd meg az elrendezést.
5. Nézd át a webhely egészére érvényes CSS-t is: a **Megjelenés → Testreszabás → További CSS** oldalt és a webhelybeállítások **Egyedi CSS** részét. Itt lehet olyan szabály, amely az elem osztályát célozza.

Lásd még: [Az egyedi CSS nem működik](https://hub.hellowp.io/hu/plugins/elementor/hibaelharitas-egyedi-css-nem-mukodik/).