So ändern Sie den Z-Index einer Tab-Leiste auf Shopify (ohne Cart Drawer oder Popups zu verdecken)

Quick answer: how to change the z-index of a tab bar

Um den Z-Index einer Tab-Leiste zu ändern, untersuchen Sie die Tab-Leiste und das kollidierende Element, vergleichen deren Z-Index-Werte und setzen den Wert der Tab-Leiste im Custom CSS Ihres Themes oder in den Einstellungen Ihrer Tab-Leisten-App niedriger oder höher. Der höhere Wert liegt vorne.

Platzieren Sie die Tab-Leiste unterhalb von Cart Drawern und Popups, damit Kunden ungehindert bezahlen können, aber oberhalb normaler Seiteninhalte. Überprüfen Sie das Ergebnis nach jeder Anpassung auf einem echten Smartphone.

Why your tab bar covers (or hides behind) other elements

Eine mobile Tab-Leiste am unteren Bildschirmrand nutzt eine feste Positionierung (fixed), damit die Hauptnavigation beim Scrollen stets in Daumenreichweite bleibt. Da sie verankert bleibt, während Produktkarten und Texte darunter hinweggleiten, muss sie auf einer erhöhten Anzeigeschicht über dem Standardinhalt liegen.

Kollisionen entstehen, weil moderne Storefronts mehrere schwebende Ebenen gleichzeitig nutzen: ausziehbare Cart Drawer, Such-Overlays, Popups, Support-Chat-Widgets und Announcement Bars. Jedes Theme und jeder App-Entwickler vergibt eigene Ebenenwerte für seine Komponenten, deshalb gibt es keine einzelne Zahl, die in jedem Shop funktioniert.

Diese fehlende Abstimmung führt auf Smartphones zu zwei typischen Darstellungsfehlern:

• Die Tab-Leiste verdeckt den Cart Drawer: Die Leiste liegt direkt über dem Fußbereich des Warenkorbs und verdeckt den Checkout-Button oder die Zwischensumme, weil ihr Ebenenwert höher ist als der des Drawers.
• Die Tab-Leiste verschwindet hinter Seiteninhalten: Die Leiste rutscht hinter ein Werbebanner, ein Video oder einen Slider, weil dieser Bereich einen höheren Wert besitzt oder einen eigenen Stacking Context bildet.

Das Verständnis der mobile tab bar architecture verdeutlicht, dass die untere Navigation mit anderen schwebenden Elementen harmonieren muss, statt unkoordiniert um Anzeigewerte zu konkurrieren.

How z-index and stacking contexts work, in plain terms

In CSS steuert die Eigenschaft z-index, wie Elemente entlang der virtuellen Z-Achse gestapelt werden, die vom Bildschirm zum Nutzer zeigt. Laut MDN Understanding z-index wird der Wert als Ganzzahl angegeben und bestimmt die Darstellungsreihenfolge, wodurch Elemente vor oder hinter anderen Elementen im selben Stacking Context platziert werden können.

Die entscheidende Bedingung lautet: im selben Stacking Context.

Wie Google web.dev definiert: “Ein Stacking Context ist eine Gruppe von Elementen mit einem gemeinsamen Elternelement, die sich gemeinsam auf der Z-Achse bewegen.” Stellen Sie sich Stacking Contexts wie Kartons vor. Liegen zwei Karten im selben Karton, liegt die Karte mit der höheren Zahl oben. Befindet sich Karte A jedoch in Karton 1 und Karton 1 steht unter Karton 2, kann Karte A niemals vor Karton 2 erscheinen – egal wie groß die Zahl auf Karte A ist.

Konzeptillustration: Ein untergeordnetes Element kann seinen übergeordneten Stacking Context nicht verlassen; liegt der Eltern-Container tiefer, bleibt das Kind-Element hinter anderen Overlays verborgen.

Wenn zwei Elemente keine direkten Geschwister im DOM sind, wird das Verhalten komplexer, da jedes Element einem eigenen Kontext angehören kann. Ein Browser erstellt einen neuen Stacking Context, sobald ein Element folgende Eigenschaften aufweist:

• position: fixed oder position: sticky
• opacity von weniger als 1
• transform, filter oder perspective mit einem anderen Wert als none

Da Fußleisten und fixierte Kopfzeilen ähnliche Eigenschaften teilen, gelten vergleichbare Prinzipien auch für sticky header and footer menus. Erzeugt ein App-Wrapper oder Theme-Container einen isolierten Kontext, bleibt das Erhöhen des Z-Index für Elemente außerhalb dieses Containers wirkungslos.

Find what’s overlapping with browser DevTools

Bevor Sie Code anpassen, untersuchen Sie die kollidierenden Elemente im Browser, um deren berechnete CSS-Werte und Eltern-Container zu ermitteln.

Konzeptillustration: Untersuchung des äußeren Tab-Leisten-Containers in den Chrome DevTools zum Ablesen der berechneten Positionierungs- und Z-Index-Werte im Styles-Tab.

Desktop Chrome

1. Klicken Sie mit der rechten Maustaste auf Ihre Tab-Leiste im Store und wählen Sie Untersuchen (Inspect).
2. Suchen Sie im DOM-Baum des Elements-Panels den äußersten Wrapper der Tab-Leiste (z. B. .mobile-tab-bar oder einen App-Container).
3. Öffnen Sie rechts den Reiter Styles. Wie in der Google Chrome DevTools docs beschrieben, listet der Styles-Tab die angewendeten CSS-Regeln auf. Suchen Sie nach position und z-index.
4. Öffnen Sie das kollidierende Element (z. B. den Cart Drawer oder das Suchfeld), klicken Sie mit rechts darauf, wählen Sie Untersuchen und notieren Sie dessen z-index und position.
5. Prüfen Sie übergeordnete Elemente beider Komponenten auf transform, filter oder opacity < 1, die einen isolierten Stacking Context erzeugen könnten.

Checking the mobile view

Klicken Sie auf das Symbol Gerätesymbole ein-/ausschalten, um ein mobiles Display zu simulieren. Obwohl Emulatoren Media Queries und DOM-Strukturen exakt abbilden, unterscheidet sich das Touch-Verhalten auf Hardware oft. Nutzen Sie DevTools zur Diagnose und testen Sie das Endergebnis stets auf einem echten Smartphone.

Pick the right layer order for tab bar, cart drawer, popups and chat

Die Beseitigung von Überlagerungen erfordert keine Fantasiezahlen wie 999999. Elemente mit höheren Ebenenzahlen überdecken Elemente mit niedrigeren Zahlen im selben Kontext; der Wert kann eine beliebige positive oder negative Ganzzahl sowie Null sein.

Strukturieren Sie Ihre Storefront nach einer klaren visuellen Hierarchie:

Es gibt keine universelle Standardzahl für alle Shopify-Themes. Wie bei der Analyse von how drawer menus are layered gilt das Relativitätsprinzip: Der Z-Index Ihrer Tab-Leiste muss kleiner sein als der Ihres Cart Drawers. Nur Beispielzahlen: Liegt der Wert Ihres Drawers bei 100, bleibt der Drawer vorn, sobald die Tab-Leiste einen Wert unter 100 hat. Ist der Drawer-Wert unbekannt, empfehlen App-Dokumentationen oft einen Startwert von 50, der bei Bedarf schrittweise reduziert wird.

Where to change the value: theme custom CSS vs. app settings

Sobald Sie den Zielwert kennen, hinterlegen Sie diesen entweder im Custom CSS Ihres Themes oder in den Konfigurationsoptionen Ihrer Tab-Leisten-App.

Theme settings Custom CSS

Gehen Sie im Shopify-Adminbereich zu Onlineshop > Edit theme > Theme-Einstellungen > Custom CSS.

Gemäß dem offiziellen Shopify Help Center gelten für hier hinterlegte Regeln bestimmte Richtlinien:

• Zeichenbegrenzung: Globale CSS-Regeln für das gesamte Theme sind auf 1500 Zeichen limitiert.
• Abschnittsgrenzen: CSS in einzelnen Abschnitten gilt nur dort und ist auf 500 Zeichen beschränkt. Für eine globale Leiste sind Theme-Einstellungen Pflicht.
• Theme-Aktualisierungen: Bei Aktualisierungen des Themes können Klassennamen abweichen, wodurch CSS-Selektoren ihre Wirkung verlieren können.

/* Example: Adjusting mobile tab bar z-index in Shopify Theme settings > Custom CSS */
/* Replace .custom-tab-bar-wrapper with your actual tab bar container selector */
@media (max-width: 749px) {
  .custom-tab-bar-wrapper {
    /* Example value: ensure this integer sits below your cart drawer */
    z-index: 40;
  }
}

Inside your tab bar app

Stammt Ihre Tab-Leiste aus einer App, prüfen Sie zuerst das integrierte Z-Index-Feld der App; die Hilfeseiten von App-Anbietern verweisen meist darauf, und der Wert wird zusammen mit Ihrem Menü gespeichert statt im CSS Ihres Themes. Hintergründe dazu, warum mehrere Apps in einem Storefront kollidieren können, finden Sie unter how app embeds can conflict with your theme.

Why your z-index change does nothing

Bleibt eine Anpassung des Ebenenwerts visuell wirkungslos, liegt das meist an einer von fünf technischen Ursachen:

Mobile-only fixes with a media query

Da Tab-Leisten primär für mobile Displays gedacht sind, sollten Sie CSS-Regeln auf mobile Viewports beschränken, um die Desktop-Navigation nicht zu verändern.

Binden Sie den Code in eine Media Query passend zum Theme-Breakpoint ein:

/* Example: Scope tab bar layer order to mobile viewports */
/* 749px is only an example breakpoint; use your own theme's breakpoint */
@media screen and (max-width: 749px) {
  .theme-mobile-tab-bar-container {
    /* Example value: positioned above page content, below cart drawer */
    z-index: 45;
  }
}

Halten Sie die Regeln kompakt, um das Limit von 1500 Zeichen im Shopify Custom CSS einzuhalten. Prüfen Sie zudem Hoch- und Querformat auf dem Smartphone, damit das Layout auch beim Drehen des Bildschirms stabil bleibt.

Trade-offs: when a high z-index is the wrong fix

Das willkürliche Setzen extrem hoher Werte birgt gravierende Nachteile:

• Verdeckter Checkout: Liegt die Tab-Leiste über dem Cart Drawer, kann sie Zwischensumme und Checkout-Button verdecken und den Kaufabschluss erschweren.
• Blockierte Einwilligungen: Verdeckt die Leiste Cookie-Banner oder Altersabfragen, können Besucher der Nutzung nicht zustimmen und den Shop nicht betreten.
• Eskalation zwischen Apps: Willkürliche Werte wie 2147483647 provozieren einen endlosen Zahlenwettlauf zwischen Drittanbieter-Apps und können trotzdem scheitern, wenn ein übergeordneter Stacking Context das Element einschließt. Oft ist es sauberer, das störende Element abzusenken oder dessen Entwickler zu kontaktieren.
• Wartungsaufwand bei Theme-Updates: Custom-CSS-Regeln können nach einem Theme-Update nicht mehr greifen, wenn sich Klassennamen ändern. Eine in Ihrer Tab-Leisten-App gespeicherte Einstellung ist kein Teil des Theme-CSS.

Where Navi+ fits

Wurde Ihre mobile Tab-Leiste mit Navi+ erstellt, müssen Sie keinen Theme-Code bearbeiten oder manuelles CSS schreiben, um die Ebenen anzupassen.

Im Navi+ Menü-Editor:

1. Öffnen Sie Ihr gewünschtes Menü im Navi+ Dashboard.
2. Wechseln Sie in den Menüeinstellungen zum Reiter Advanced.
3. Suchen Sie die Karte Z-index (“Z-INDEX: Set the menu layer order”).
4. Prüfen Sie den aktuellen Wert im Z-Index-Feld und geben Sie Ihre gewünschte Ganzzahl ein (akzeptiert Werte von 0 bis 2147483647).
5. Klicken Sie auf Save.

Ihre Ebeneneinstellung wird in der Menükonfiguration gespeichert, nicht im Code Ihres Themes.

Wenn Sie moderne mobile navigation beyond the hamburger menu implementieren, sorgt eine saubere Abstimmung zwischen Fußleiste und Cart Drawer für ein reibungsloses Einkaufserlebnis.

If your tab bar comes from Navi+, you don’t need to touch theme code: open the menu, go to Advanced, set the Z-index below your cart drawer, and save. If you’re unsure which value fits your theme, our support team can look at it with you.

Test checklist before you call it fixed

Gehen Sie diese 10-Punkte-Prüfliste durch, bevor Sie die Änderungen für alle Kunden freigeben:

• Cart Drawer öffnen: Artikel in den Warenkorb legen, Drawer öffnen und sicherstellen, dass Artikel und Checkout-Button klickbar sind.
• Suche testen: Suchmaske oder Vollbild-Modal öffnen und prüfen, ob die Eingabe und Vorschläge über der Tab-Leiste liegen.
• Popups und Banner prüfen: Newsletter-Popups, Rabatt-Modals, Cookie-Banner und Altersprüfungen auf korrekte Überdeckung testen.
• Live-Chat überprüfen: Chat-Widget öffnen; sicherstellen, dass das Symbol die Menüpunkte der Tab-Leiste nicht behindert.
• Theme-Menü-Drawer öffnen: Hamburger-Button antippen, um ein sauberes Ausfahren des Hauptmenüs ohne Abschneiden zu bestätigen.
• Medieninhalte scrollen: Über Startseiten-Slider und Videobanner scrollen, um die durchgehende Sichtbarkeit der Leiste zu prüfen.
• Auf iOS Safari testen: Store auf einem echten iPhone in Safari aufrufen und den Bereich des Home-Indikators am Displayrand prüfen.
• Auf Android Chrome testen: Store auf einem echten Android-Smartphone öffnen und die Reaktionsfähigkeit der Touch-Ziele testen.
• Bildschirm drehen: Gerät zwischen Hoch- und Querformat drehen, um die responsive Anpassung der Media Queries zu verifizieren.
• Cache leeren und Inkognito testen: In einem privaten Browserfenster testen, um sicherzustellen, dass keine alten Stylesheets geladen werden.

FAQ

How do I change the z-index of a tab bar?

Untersuchen Sie beide Elemente mit den DevTools zum Wertevergleich und weisen Sie der Tab-Leiste im Theme Custom CSS oder in den App-Einstellungen eine passende Zahl zu.

Why is my tab bar showing over the cart drawer?

Die Tab-Leiste besitzt im selben Stacking Context einen höheren Z-Index als der Cart Drawer; senken Sie den Wert der Leiste unter den des Warenkorbs.

Why does my z-index change have no effect?

Das Element ist entweder statisch positioniert oder befindet sich in einem übergeordneten Container, dessen isolierter Stacking Context die Reichweite der Werte begrenzt.

Which z-index value should I use?

Es gibt keinen festen Standardwert; wählen Sie eine Zahl, die über dem Seiteninhalt, aber unter dem Cart Drawer liegt, oder starten Sie testweise bei 50.

Where do I put the CSS in Shopify?

Hinterlegen Sie globale Regeln im Shopify-Adminbereich unter Onlineshop > Edit theme > Theme-Einstellungen > Custom CSS (maximal 1500 Zeichen).

Sources

• MDN Web Docs: Understanding CSS z-index
• MDN Web Docs: The Stacking Context
• MDN Web Docs: z-index Property Reference
• Google web.dev: CSS z-index and Stacking Contexts
• Google Chrome DevTools: View and Change CSS
• Shopify Help Center: Adding Custom CSS to Your Theme
• Hextom Help Center: My Bar Is Covering Another Element – How to Fix It
• Conversion Bear Support: Sticky Bar Is Covering the Side Cart
• Ninja Commerce Support: Resolving Sticky Bar Overlap and Push Down Issues
• MakeProSimp Support: How Does Z-index Affect the Popup and Cart Drawer?