アイコンボタンがヘッダーに重なった時のz-index修正方法
固定ヘッダーとウィッシュリストボタンやカートアイコンが重なって、ボタンがヘッダーの背後に消えてしまう症状は、CSSのz-indexを適切に追加することで解決する。特にposition: relativeが指定されているにもかかわらずz-indexを設定していない場合、ボタンがスタッキングコンテキストの底に回り込んでしまう。.wishsuite-buttonにz-index: 10 !important;を加えることで、ヘッダーより前面に表示できるようになる。
なぜアイコンがヘッダーの下に隠れてしまうのか
多くのテーマでは、スクロールに追従する固定ヘッダー（スティッキーヘッダー）に高いz-index（100や999など）が割り当てられている。一方、ページ内の商品一覧やループに表示される「ウィッシュリストに追加」や「カートに入れる」といったアクションボタンは、デフォルトでz-indexがauto（実質0）のままであることが多い。これによって、両者が視覚的に重なった瞬間に、ボタンがヘッダーの背面に隠れてしまう。
たとえば、WishSuiteプラグインのボタンにはposition: relativeが付与されているが、z-indexが欠けていたために、スクロール時にアイコンだけがヘッダーの下に潜り込む現象が発生した。このように、ポジションを指定している要素にz-indexを明示しないことが、多くの重なりトラブルの直接的な原因になる。
さらに、親要素にoverflow: hiddenが指定されていると、ボタン自体がはみ出しを切られてしまうケースもある。これはz-indexで前面に出しても、親の枠外に描画されないため、対策が異なる点に注意が必要だ。
z-indexで重なり順を修正する具体的なCSS
ボタンのセレクタを見つけ出し、z-indexを明示して上書きするのが最も早い解決方法だ。WishSuiteのケースでは、以下のCSSを追加CSSか子テーマのstyle.cssに追記するだけで問題が解消した。
.wishsuite-button {
z-index: 10 !important;
}値は10で十分だが、サイト上の他の要素との兼ね合いで必要に応じて20や50に変更しても問題ない。!importantを使っているのは、プラグインの元のスタイルを確実に上書きするためだ。テーマのCSS詳細度によっては、!importantなしでも効くことがあるが、まずは付け加えて動作を確認するほうが安全である。
この修正の前後で、ページ上でのアイコンの振る舞いがどう変わるかを視覚的に示す。
それでも直らない場合のチェックポイント
z-indexを追加しても状況が変わらない時は、以下の3点を順に確認する。
親要素にoverflow: hiddenが設定されていないか
ボタンを囲むコンテナにoverflow: hiddenが指定されていると、z-indexをどれだけ大きくしても枠からはみ出して表示されない。開発者ツールで親要素を順にさかのぼり、overflowプロパティを探して、必要に応じてoverflow: visibleに変更するか、マークアップの見直しを検討する。
ヘッダー自体にtransformやwill-changeが使われていないか
CSSのtransformやwill-changeプロパティは新しいスタッキングコンテキストを作成し、その内部でz-indexがリセットされることがある。ヘッダーにこうしたプロパティがあると、子要素のz-indexが親の新しいコンテキストに閉じ込められ、他の要素との比較が意図通りにならない。この場合は、ヘッダー側のプロパティを外すか、ボタンをヘッダーと別の階層に配置し直す必要が出てくる。
プラグインのフックで後の読み込み順を確認する
CSSファイルの読み込み順によって、自分の追加CSSが後から読み込まれているのに、テーマのスタイルが !important で上書きされているケースもある。開発者ツールの「Styles」パネルで実際に適用されているルールを調べて、セレクタの詳細度を上げるか、より強力なセレクタに置き換える。
プラグイン更新で根本解決するケース
同じボタンに同じ不具合が出ているサイトであれば、プラグイン開発者側で修正が入るのが最も確実だ。今回のWishSuiteでも、バージョン1.5.8で初期スタイルにz-index: 10 !importantが追加され、コードを自分で触らずにアップデートだけで解決した。
カスタマイズのしすぎを防ぎ、セキュリティ面でも安全なため、まずは管理画面からプラグインの更新がないかを確認してみる。更新情報や変更履歴を読めば、同様のCSS修正が含まれているかどうかをすぐに判断できる。
よくある質問
z-indexの値はいくつにすればよいか
ヘッダーに設定されている値より大きければ機能する。多くのテーマではヘッダーに99や999が使われているので、10や20など控えめな値で十分だが、サイト内の他のモーダルやポップアップより低く保つために50〜100程度にしておくと、後々の競合が起きにくい。
!importantを使わないと効かないのか
プラグインのスタイルが詳細度の高いセレクタで指定されている場合に必要になる。開発者ツールで適用済みのルールを確認し、自分の記述が打ち消されていなければ、!importantを外しても問題ない。
違うプラグインのアイコンでも同じ方法で直せるか
はい。ボタンのHTMLクラスを調べて、対応するセレクタにz-indexを指定すれば同様に解決できる。WooCommerceの「カートに入れる」ボタンや、Compare系プラグインのボタンでも、構造はほとんど同じだ。
CSS追加は子テーマに書くべきか、追加CSSか
どちらでも構わないが、管理画面の「外観」→「カスタマイズ」→「追加CSS」に追記するのがコード編集に不慣れな人にとっては手軽で安全だ。子テーマがあるなら、そちらのstyle.cssにまとめておくと管理がしやすい。
モバイルではヘッダーが小さくなるのに問題は起きないか
z-indexを適切に設定してあれば、ヘッダーの高さが変わってもアイコンが隠れることはない。ただし、画面幅が狭くなってボタン同士が詰まりすぎる場合は、メディアクエリで隙間を調整する追加のCSSを検討する。
この記事のポイント
- 固定ヘッダーにアイコンボタンが隠れるのはz-index不足が原因
- position: relativeの要素にz-index: 10 !important;を追加すれば前面に表示できる
- 修正後も直らない時は親要素のoverflowやtransformの影響を確認する
- プラグインのアップデートで不具合が解消されていることがある
- 追加CSSで手軽に適用でき、他のアクションボタンにも応用できる
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている