A widgetet valami eltakarja

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).

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).

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

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.