SANGOの案件で何度か同じ現象にハマってきたため、備忘録としてまとめます。
症状：フルサイズ背景ブロックがドロワーメニューに重なる
SANGOのフルサイズ背景ブロック（sgb-full-bg）をページに使うと、スマホでドロワーメニューを開いたときに背景ブロックがメニューの上に乗っかってしまう現象が起きます。
SANGOをブログではなくWebサイト制作に活用する場合、ヘッダーやメインビジュアルをフルサイズブロックでデザインするケースが多いと思いますが、まさにそういった場面でこの問題が発生しやすいです。
↓
z-index挙動がおかしい…
なお、スマホのドロワーメニューだけでなく、PC表示のグローバルナビのサブメニュー（ぶら下がりメニュー）にも同様の干渉が起きます。
原因：スタッキングコンテキストの分離
原因はz-indexの競合・干渉。
フルサイズ背景ブロックの内部要素（.sgb-full-bg__content）がドロワーより高いスタック順になってしまっているためです。
フルサイズ背景ブロックのz-index構造はこのようになっています。
.sgb-full-bg position: relative
├ .sgb-full-bg__cover position: absolute / z-index: 1 ← 背景画像
├ .sgb-full-bg__shade position: absolute / z-index: 1 ← オーバーレイ
└ .sgb-full-bg__content position: relative / z-index: 2 ← コンテンツ ← ここが問題
この状態で単純にz-indexを調整しようとすると、
- フルサイズ背景側の
.sgb-full-bg__contentのz-indexを小さくしてもダメ - ドロワー側
.drawer-contentのz-indexを大きくしてもダメ
という八方塞がりになります。
これはスタッキングコンテキストが分離されているためです。position: relative が設定された親要素が独立したスタッキングコンテキストを形成すると、その外側の要素がどんなに高いz-indexを持っていても、コンテキストをまたいで競合することができない構造になります。
解決方法：フルサイズ背景ブロックに任意のクラスを追加する
ポイントは、干渉しているフルサイズ背景ブロックにカスタムクラスを追加することです。
手順1：ブロックにクラスを追加する
フルサイズ背景ブロックを選択した状態で、SANGOのブロック設定にある「追加CSSクラス」欄に任意のクラス名を入力します。
hero-sectionクラス名は任意で構いません。ページ内で重複しない名前にしてください。
手順2：CSSを追加する
子テーマの style.css、またはSANGO管理画面の「追加CSS」に以下を記述します。
.hero-section .sgb-full-bg__content {
z-index: 1 !important;
}.sgb-full-bg__content 単体に同じz-index調整を当てても効かない理由は、SANGOが内部でインラインスタイルやより詳細度の高いセレクタでz-indexを上書きしているためと考えられます。
カスタムクラスを親要素として追加することでCSSの詳細度（specificity）が上がり、!important が正しく適用されるようになります。
まとめ
SANGOのフルサイズ背景ブロックがドロワーメニューやサブメニューに重なる場合は、z-indexの直接調整ではなく、ブロックにカスタムクラスを追加して詳細度を上げることで解決できます。
| 対処 | 効果 |
|---|---|
.sgb-full-bg__content のz-indexを直接変更 | ❌ 効かない |
.drawer-content のz-indexを上げる | ❌ 効かない |
| フルサイズ背景にクラスを追加してCSSで制御 | ✅ 解決 |
同じ現象でお困りの方はぜひ試してみてください！
この記事を書いた人
パリスタデザイン事務所のWebデザイナー・フロントエンドエンジニア。
WordPress構築・カスタマイズを中心に、CMS設計・構築や情報設計を得意としています。
AIやWeb技術、PC/ガジェットを活用しながら、「無理なく続く仕組みづくり」や実務に役立つ知見を発信しています。
