Quick answer: how to change the z-index of a tab bar
タブバーのz-indexを変更するには、ブラウザの検証ツールでタブバーと重なっている要素を検査してそれぞれのz-index値を比較し、テーマのカスタムCSSまたはタブバーアプリの設定でタブバーの値を適切に低く（または高く）設定します。より大きな数値を持つ要素が前面に描画されます。
購入手続きを妨げないよう、タブバーはカートドロワーやポップアップよりも下の階層に、通常のスクロールコンテンツよりは上の階層に配置してください。数値を設定した後は、必ず実際のスマートフォン端末で動作を確認します。
Why your tab bar covers (or hides behind) other elements
スマートフォンの画面下部に配置されるタブバーは、スクロール中も主要メニューを親指が届く範囲に維持するため、CSSの固定配置（position: fixed）を使用します。コンテンツが下を通り抜けていく間も画面上に留まり続ける必要があるため、通常の文章や商品グリッドよりも高い表示レイヤーに置かれます。
トラブルが発生するのは、最新のECサイトが複数の浮動レイヤーを同時に使用しているためです。スライド式カートドロワー、検索モーダル、メルマガ登録ポップアップ、カスタマーサポートチャット、告知バーなどが同時に動作します。テーマやアプリの開発者がそれぞれ独自の整数をレイヤー番号として割り当てているため、すべてのストアで通用する唯一の数値はありません。
この調整不足により、スマートフォン上で2つの典型的な表示崩れが起こります：
- タブバーがカートドロワーを覆い隠す： タブバーの数値がカートより高いため、カートの下部に重なって表示され、チェックアウトボタンや小計が見えなくなります。
- タブバーがページ要素の背後に隠れる： プロモーションバナーや動画セクションが独自の高いレイヤーやコンテキストを持つため、タブバーがその下に潜り込んでしまいます。
mobile tab bar architectureを理解することで、下部ナビゲーションを他の浮動レイヤーと衝突させるのではなく、秩序立てて共存させる設計が可能になります。
How z-index and stacking contexts work, in plain terms
CSSにおいて、z-indexプロパティは画面からユーザーに向かって伸びる仮想のZ軸に沿って要素をどのように重ねて描画するかを制御します。MDN Understanding z-indexによれば、このプロパティは整数（正、負、または0）で指定され、同一のスタッキングコンテキスト（重ね合わせコンテキスト）内にある要素の前後関係を決定します。
ここで最も重要な前提は、「同一のスタッキングコンテキスト内において」という点です。
Google web.devが解説している通り、「スタッキングコンテキストとは、共通の親を持ち、Z軸上を一緒に上下に移動する要素のグループ」です。スタッキングコンテキストを段ボール箱に例えてみましょう。同じ箱の中に2枚のカードがあれば、大きな数字が書かれたカードが前に出ます。しかし、カードAが箱1に入っており、箱1自体が箱2の下に積まれている場合、カードAにどんなに大きな数値を設定しても箱2の前に出ることはできません。
概念イラスト：子要素は親のスタッキングコンテキストの境界を越えられません。親コンテナが下の階層にある場合、子要素のz-indexをいくら上げても他のオーバーレイの背後に隠れたままになります。
2つの要素がDOM内で直接の兄弟関係にない場合、それぞれが独立したスタッキングコンテキストに属している可能性があるため、重ね合わせの挙動は複雑になります。ブラウザは以下のようなCSSプロパティが適用された要素に新しいスタッキングコンテキストを作成します：
position: fixedまたはposition: sticky1未満のopacity（不透明度）none以外のtransform、filter、perspective
下部メニューと固定ヘッダーは共通の配置特性を持つため、同様のレイヤー相互作用はsticky header and footer menusでも発生します。アプリのラッパーやテーマのコンテナが独自のコンテキストを形成している場合、内側のタブバーの数値をどれだけ増やしても、外部の要素に対しては効果がありません。
Find what’s overlapping with browser DevTools
コードを修正する前に、ブラウザの検証ツールを使用して衝突している要素の算出スタイルと親コンテナを確認します。
概念イラスト：ブラウザのDevToolsでタブバーの外枠コンテナを検証し、Stylesタブに表示されたpositionとz-indexの指定を確認する画面。
Desktop Chrome
- ストアフロントでタブバーを右クリックし、検証（Inspect）を選択します。
- ElementsパネルのDOMツリー内で、タブバーの最外枠コンテナ（
.mobile-tab-barやアプリ独自のラッパーなど）を探します。 - 右側のStylesタブを確認します。Google Chrome DevTools docsに記載されている通り、Stylesタブには選択された要素に適用されているCSSルールが一覧表示されます。
positionとz-indexを確認します。 - 衝突している要素（カートドロワーや検索モーダルなど）を開き、右クリックして検証を選び、その要素の
z-indexとpositionを記録します。 - 両方の要素の親ツリーを上に辿り、
transform、filter、opacity < 1など、独立したコンテキストを形成している親要素がないか確認します。
Checking the mobile view
DevTools左上のデバイスのツールバーを切り替えアイコンをクリックして、スマートフォン表示をエミュレートします。画面幅やDOMの検証は手軽に行えますが、実際のタッチ操作や描画の挙動は実機と異なる場合があります。DevToolsで数値を把握した上で、最終的な確認は必ず実機スマートフォンで行ってください。
Pick the right layer order for tab bar, cart drawer, popups and chat
要素の重なりを解消するために 999999 のような極端な数値を当て推量で設定する必要はありません。同一コンテキスト内では数値が大きい要素が小さい要素の上に描画され、値は正、負、0のいずれの整数でも有効です。
ストア全体の要素を、明確な視覚的優先度に基づいて階層化しましょう：
| 対象要素 | 推奨レイヤー位置 | 設定の理由 |
|---|---|---|
| ページ本文・セクション | タブバーの下 | テキスト、商品カード、コレクション、バナーは固定バーの下を滑らかに通過すべきです。 |
| モバイル下部タブバー | 本文の上、操作オーバーレイの下 | 閲覧中は親指ですぐ操作できる状態を保ちつつ、専用の購入手続き画面が開いた際は背面に退きます。 |
| カートドロワー、検索、ポップアップ | タブバーの上 | 数量変更や購入手続きボタンのタップなど、売上に直結する主要導線を決して邪魔してはなりません。 |
| ライブチャットウィジェット | タブバーと横並びに調整 | サポート窓口としてアクセスしやすさを維持しつつ、タブバーのリンクやチェックアウトボタンを隠さないようにします。 |
Shopifyテーマ共通の「絶対的な正解の数値」は存在しません。how drawer menus are layeredを考慮する際の鉄則は相対順序です。すなわち、タブバーのz-indexはカートドロワーの数値よりも小さく設定する必要があります。あくまで例の数値ですが、カートの値が 100 なら、タブバーを 100 より小さい値にすればカートが前面に表示されます。カートの値が不明な場合、いくつかのアプリ公式ガイドでは暫定値として50から試し、衝突が残る場合は段階的に数値を下げる方法を推奨しています。
Where to change the value: theme custom CSS vs. app settings
適切な数値が判明したら、テーマのカスタムCSSまたはタブバーアプリの設定画面から適用します。
Theme settings Custom CSS
Shopify管理画面から、オンラインストア > Edit theme > テーマ設定 > カスタムCSS に進みます。
公式のShopify Help Centerによると、ここに記述したルールはテーマ全体に適用されますが、いくつかの重要な制限事項があります：
- 文字数制限： テーマ全体に適用されるカスタムCSSは1500文字以内に制限されています。
- セクション単位のスコープ： 個別セクションに追加されたCSSはそのセクション内のみに適用され、500文字制限があります。画面全体に浮動するタブバーにはテーマ設定側のCSSを使用します。
- テーマ更新の影響： テーマをアップデートした際、クラス名や構造が変化するとCSSセレクタが機能しなくなる可能性があります。
/* 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
タブバーをアプリで生成している場合は、まずアプリ管理画面内のz-index設定を確認してください。アプリベンダーのヘルプページも通常そこを案内しており、この値はテーマのCSSではなくメニューとともに保存されます。複数のアプリがストアフロントで競合しうる理由については、how app embeds can conflict with your themeを参照してください。
Why your z-index change does nothing
数値を変更して保存したにもかかわらず画面上の表示が全く変わらない場合、以下の5つの技術的要因のいずれかに該当している可能性が高いです：
| 確認された症状 | 背景にある技術的原因 | 解決策・修正手順 |
|---|---|---|
| CSSで数値を変更しても要素が前後しない | 要素の配置がstaticのまま： z-index は配置指定された要素（relative、absolute、fixed、sticky）またはflex/gridアイテムにのみ機能します。staticな要素はz-indexを無視します。 |
対象セレクタに position: fixed や position: relative を明示的に追加します。 |
| 大きな数値を設定しても小さな数値の背面に残る | 親のスタッキングコンテキストに閉じ込められている： タブバーの親コンテナに transform や opacity < 1 が設定されています。MDN Stacking contextの通り、子の値は親の中でしか効力を持ちません。 |
カートドロワーと共通の祖先を持つ最も外側の親コンテナに対してz-indexを指定します。 |
| StylesタブでCSSルールに取り消し線が引かれている | 他のルールに上書きされている： より詳細度の高いセレクタや !important 付きの宣言が優先されています。 |
より詳細なセレクタで記述します。!important は恒久的な解決策ではなく一時的な確認手段に留めてください。 |
auto を設定しても階層がリセットされない |
auto はコンテキストを作らない： auto は新しいローカルスタッキングコンテキストを確立しません。 |
階層を制御したい場合は、auto ではなく明示的な整数値（0、正、または負）を指定します。 |
| アイコンは移動するが背景バーが覆い被さる | 対象セレクタの階層が誤っている： 外枠の固定コンテナではなく、内側のリンクやSVGタグのみを装飾してしまっています。 | DevToolsでDOMツリーを再確認し、一番外側の固定配置コンテナにスタイルを適用します。 |
Mobile-only fixes with a media query
下部タブバーは主にモバイル端末専用のUIパターンです。デスクトップ表示に予期せぬレイアウト崩れを起こさないよう、CSSルールはモバイル画面幅に限定して適用します。
テーマのブレークポイントに合わせたメディアクエリ内にルールを記述します：
/* 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;
}
}
Shopifyテーマ設定の1500文字制限に収めるため、CSSルールは必要なプロパティのみを簡潔に記述してください。また、ユーザーがスマートフォンを横向きに回転させた際にもレイアウトが崩れないか、縦向きと横向きの両方で確認しておきましょう。
Trade-offs: when a high z-index is the wrong fix
むやみに極端な数値を設定することは、一見手軽に見えても重大な運用リスクを伴います：
- 購入完了ボタンの隠蔽： タブバーをカートより前面に配置してしまうと、小計やチェックアウトボタンが隠れ、購入手続きが難しくなる可能性があります。
- 法的同意・告知モーダルの遮断： GDPRのCookie同意バーや年齢確認モーダルをタブバーで覆ってしまうと、ユーザーが同意ボタンを押せずサイトを閲覧できなくなります。
- アプリ間のレイヤー泥沼化：
2147483647のような任意の大きな数値を入力すると、サードパーティ製アプリ同士の数値競争を招き、親のスタッキングコンテキストに閉じ込められていれば効果が出ないこともあります。他社アプリが原因の場合は、その要素のレイヤーを下げるかアプリ開発元に対処を依頼するのが適切なことが多いです。 - テーマ更新時の脆弱性： カスタムCSSでクラス名を直接指定していると、テーマの更新でクラス名が変わった場合にルールが効かなくなることがあります。タブバーアプリ内に保存された設定は、テーマのCSSには含まれません。
Where Navi+ fits
Navi+で下部タブバーを作成している場合、テーマコードの直接編集やカスタムCSSの記述を行わずに表示階層を調整できます。
Navi+のメニュー編集画面での手順：
- Navi+のダッシュボードから対象のメニューを開きます。
- メニュー設定内の Advanced タブを選択します。
- Z-index カード（“Z-INDEX: Set the menu layer order”）を確認します。
- 現在の数値を確認し、希望する整数を入力します（
0から2147483647までの整数に対応）。 - Save をクリックします。
設定したレイヤー順序は、テーマのコードではなくメニューの設定内に保存されます。
mobile navigation beyond the hamburger menuを導入する際、下部バーとスライドカートの階層が美しく調和していることが、快適なモバイル購入体験を支える基盤となります。
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
変更内容を本番公開する前に、以下の10項目を必ず確認してください：
- カートドロワーの確認： カートに商品を追加し、ドロワー内の商品一覧やチェックアウトボタンが問題なくタップできるか確認する。
- 検索オーバーレイの確認： 検索ドロワーや全画面モーダルを開き、入力欄や検索候補がタブバーの上にきれいに表示されるか確認する。
- 各種ポップアップの確認： メルマガ登録、割引モーダル、Cookie同意バナー、年齢認証画面がタブバーの前面に出るか確認する。
- チャットツールの確認： サポートチャットの吹き出しがタブバーのアイコンや主要導線と重なっていないか確認する。
- テーマのドロワーメニューの確認： ハンバーガーメニューをタップし、メニューがタブバーの背面に隠れず展開するか確認する。
- リッチメディアセクションの確認： カルーセルや背景動画セクション上をスクロールした際、タブバーが消えずに留まっているか確認する。
- 実機iOS Safariでのテスト： 実機のiPhoneを使い、Safariで画面下部のホームインジケーター周辺の操作性を確認する。
- 実機Android Chromeでのテスト： 実機のAndroid端末を使い、Chromeでタップ領域の反応速度を確認する。
- 画面回転のテスト： 端末を縦向き・横向きに回転させ、メディアクエリが崩れずに追従するか確認する。
- キャッシュ削除とシークレットモードでの確認： プライベートブラウジング画面で最新のCSSが正しく読み込まれているか確認する。
FAQ
How do I change the z-index of a tab bar?
DevToolsで2つの要素を比較して階層を確認し、テーマのカスタムCSSまたはアプリ設定でタブバーの数値を適切に設定します。
Why is my tab bar showing over the cart drawer?
同一スタッキングコンテキスト内でタブバーの数値がカートより高いためです。タブバーの数値をカートより小さく設定してください。
Why does my z-index change have no effect?
要素がデフォルトのstatic配置のままであるか、親コンテナが独立したスタッキングコンテキストを形成していることが原因です。
Which z-index value should I use?
共通の標準値はありません。本文より高くカートより低い数値を指定するか、まずは50程度から試して微調整してください。
Where do I put the CSS in Shopify?
Shopify管理画面の オンラインストア > Edit theme > テーマ設定 > カスタムCSS に記述します（最大1500文字）。
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?
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。