Z-index

Dies ist ein häufiges Problem, aber sehr einfach zu handhaben, wenn Sie Navi+ verwenden. Ihre Website kann viele schwebende Elemente haben – sehen Sie sich die Beispiele unten an, um sie zu erkennen.

Note: These are the current z-index setups on the Dawn theme (Shopify’s most popular free default theme) at this time.

Diese schwebenden Elemente werden durch ihre eigenen z-index-Werte gesteuert. Je höher der z-index, desto mehr Priorität hat dieses Element, um über anderen angezeigt zu werden. Der knifflige Teil ist, dass es keine festen Regeln für z-index-Werte gibt. Sie können jede Zahl bis zu 2.147.483.647 zuweisen. Jedes Thema, das Sie verwenden, und jede App, die auf Ihrem Shopify-Shop läuft, kann ihren eigenen z-index für schwebende Komponenten zuweisen – normalerweise basierend auf den Vorlieben des Entwicklers. Wenn diese Elemente auf Ihrer Website interagieren, können sie sich auf unerwartete Weise überlappen.

Lassen Sie uns ein wenig Spaß haben :joy:: Werfen Sie einen genaueren Blick auf den Screenshot oben und Sie werden sehen – ja, es ist ein Durcheinander, und es gibt absolut keine Regeln. Es gibt drei Entwickler hinter der Website, die Sie sich ansehen.

Der Entwickler, der das Dawn-Thema erstellt hat, wählte einen z-index von 3 für das Menüpanel und 1000 für das Warenkorb-Panel – völlig unabhängig, ohne klare Logik.

Dann gibt es den Entwickler der Rivo Loyalty Rewards-App – einem beliebten Treue-Tool – der einen z-index von 99999999999 gewählt hat, wahrscheinlich ohne zu zählen, wie viele Neunen sie eingegeben haben. Ihr einziges Ziel: sicherstellen, dass der schwebende „Rewards“-Button immer oben bleibt, egal was passiert, sogar über Ihrem Warenkorb-Panel.

In der Zwischenzeit wählte der Navi+-Entwickler bescheiden eine kleinere Zahl – nur 5 – weil wir nicht zu aggressiv oder aufdringlich sein wollten. Also, was sollten Sie tun?

Schritt 1: Finden Sie den richtigen z-index Ihres Navi+-Menüs

Methode 1: Fragen Sie den Navi+-Support (Am einfachsten)

Dies ist der beste und effektivste Weg. Wir können Ihnen Informationen über die z-index-Werte von wichtigen Schnittstellenelementen wie dem Menüpanel, dem Warenkorb-Panel und allen Drittanbieter-Apps, die Sie verwenden, bereitstellen und dann die beste z-index-Einstellung für Ihren Fall empfehlen.

Zögern Sie nicht, das Chat-Fenster in der unteren rechten Ecke des Bildschirms zu nutzen, um mit einem Navi+-Supporter zu sprechen. Navi+ wächst, und wir schätzen Ihr Feedback wirklich – Ihre Probleme helfen uns, ein besseres Produkt zu entwickeln.

Wir sind nicht 24/7 online – nur 14 Stunden am Tag, basierend auf der vietnamesischen Zeitzone. Sobald wir Ihre Nachricht sehen, werden wir sofort antworten.

Methode 2: Verwenden Sie den Inspektor-Modus Ihres Browsers (detailliert, erfordert jedoch technisches Wissen)

Bisher gibt es keine bessere Methode, um dies selbst zu überprüfen, es sei denn, Sie verwenden den Inspektor-Modus. Dieses Entwickler-Tool ist in allen modernen Browsern wie Chrome, Firefox, Safari oder Edge verfügbar. Klicken Sie mit der rechten Maustaste irgendwo auf Ihrer Website und wählen Sie Untersuchen, um den Inspektor-Modus zu öffnen.

Methode 3: Versuchen und testen Sie basierend auf unseren Vorschlägen (Persönliche Erfahrung)

In den meisten Fällen sind z-index-Probleme selten, wenn Sie nicht zu viele Apps verwenden. Das Hauptproblem entsteht normalerweise durch Überlappungen zwischen Ihrem Menü und anderen Schnittstellenelementen wie dem Menüpanel oder dem Warenkorb-Panel.

  • Für Navi+ Sticky-Menüs wie Tabbar oder FAB: Wir empfehlen, den z-index niedrig zu halten, etwa 2 oder 3. Diese Menüs nehmen Bildschirmplatz ein, und es wäre kaputt oder nervig, wenn sie funktionale Panels wie den Warenkorb überdecken.
  • Für Navi+ Abschnittsmenüs wie Mega-Menüs: Wenn sie oben (im Header) platziert sind, können Sie sicher einen sehr hohen z-index (z.B. 2000000000) festlegen, um sicherzustellen, dass das Dropdown-Submenü nicht hinter anderen Komponenten verborgen ist.
  • Für Navi+ Grid-Menüs: z-index hat keine Wirkung, da das Menü flach ist und keine geschichtete Tiefe hat.
  • Für Navi+ Slide-Menüs: z-index sollte sehr hoch eingestellt werden (z.B. 2000000000), um zu vermeiden, dass sie hinter anderen Elementen verborgen werden.

Schritt 2: Aktualisieren Sie den z-index Ihres Navi+-Menüs

Wie aktualisiere ich den z-index des Navi+-Menüs?

Wählen Sie das erweiterte Menü und scrollen Sie nach unten, um die Z-index-Karte zu finden, und aktualisieren Sie dann den z-index und vergessen Sie nicht, auf SPEICHERN zu klicken, um die Änderungen anzuwenden.