Zum Hauptinhalt springen
Überlappungsproblem (Overlay)

Falls du die folgenden Artefakte siehst, könnte dieser Artikel dir weiterhelfen

Vor über einem Monat aktualisiert

So behebst du das Overlay-Schichtproblem

Das Problem liegt meistens an einem falschen z-index unseres Overlays im Vergleich zu anderen Elementen auf deiner Webseite. Das Overlay selbst sortiert sich normalerweise richtig in den z-index ein, aber wenn unsere Komponenten in andere Elemente deines Shops eingebettet sind, kann es zu Schichtungsproblemen kommen.

Zuerst musst du das Element finden, das die Probleme verursacht. Das ist von Shop zu Shop unterschiedlich und liegt in der Regel nicht am retraced-Overlay selbst.

Hier sind typische Styles, die die Schichtung durcheinanderbringen können:

(1) css-transform im übergeordneten Element


Ein css-transform erzeugt eine neue Canvas, wodurch die Z-Reihenfolge innerhalb dieser Canvas neu erstellt wird. Diese Canvas kann von anderen Elementen auf deiner Seite überlagert werden. Sieh dir dazu Erklärungen auf Stack Overflow an:

Lösung: Verwende kein css-transform in irgendeinem übergeordneten Element, in dem unsere Komponente eingebettet ist.

(2) z-index-Konflikte zwischen Geschwisterelementen


Wenn zwei Komponenten denselben z-index haben, aber unterschiedlich tief verschachtelt sind, wird die weniger tief verschachtelte Komponente bevorzugt.

Lösung: Definiere den z-index im DOM klar und eindeutig.

Diese beiden Punkte sind die häufigsten Stolperfallen.

Aber andere Plugins funktionieren doch direkt!

Unsere Komponenten sind mit den neuesten Webtechnologien gebaut, die zwar nicht absolut „bulletproof“ sind, aber dennoch sehr zuverlässig, insbesondere was Sicherheit angeht. Sie verlangsamen deine Seitenladezeit nicht, da sie unabhängig laufen und weder von anderen Seitenelementen blockiert noch durch Fehler auf der Seite beeinflusst werden können. Falls du beispielsweise ein fehlerhaftes anderes JavaScript laufen lässt, bleiben unsere Komponenten trotzdem sichtbar, da unser Code nach höchsten Standards in einer isolierten „Sandbox“ ausgeführt wird.

Andere Plugins, die direkt funktionieren, verzögern deine Seitenladezeit oft um 150 ms oder mehr, da sie die ursprüngliche Seite beim Laden verändern. Unsere Komponenten hingegen laden parallel, ohne die Seite zu beeinflussen.

Immer noch Probleme?


Falls das Platzierungsproblem weiterhin besteht, melde dich einfach bei uns. Wir helfen dir gerne, das Styling-Problem zu lösen!

Hat dies deine Frage beantwortet?