ブログBlog

モーダルウィンドウでz-indexが効かない事象に遭遇

所沢市でホームページ制作や欧州輸入品の販売を行っているRishunTradingです。
今回は、モーダルウィンドウ実装時に、z-indexが効かない事象に遭遇しましたので、その原因について記載させて頂きます。
なお、「あれz-indexが効かないな。」と思ったら、こちらも参照して見て下さい。
https://rishuntrading.co.jp/blog/programing/safari_z-index_notwork/
こちらは、今回とは別の原因で、z-indexが効かなかった時の、お話です。

1.実際にz-indexが効かない事例のデモ

こちらのデモを見て下さい。
「クリックして下さい。」をクリックするとモーダルウィンドウが開くかと思います。

画像
クリックして下さい。

これは、モーダルウィンドウを表示するテストです。

画像をクリックすると、モーダルウィンドウがポップアップで表示され、クリックされた画像が表示されます。

モーダルウィンドウをポップアップで表示しているので、このモーダルウィンドウがz-index上、一番上に設定される事で、それ以外は後ろに回ります。それにより、関係のないエリアは、周りが黒で透過されます。

よくあるパターンとして、position:fixedで配置されたボタン(お問い合わせボタンやお申し込みボタンなど)がある場合には、本来、このposition:fixedで配置されたボタンも、z-indexでは後ろに回るため、黒く透過されて後ろに配置されなければならないのですが、そうはなっておらず一番上にきてしまっています。

なぜ、このような事が起きてしまうのかを今回は解説させていただきます。

× 画像
お問い合わせ

こちらのモーダルウィンドウを良くみてみると、右側の「お問い合わせ」のボタンが、前面に出てしまっています。
モーダルウィンドウですので、本来であれば、この「お問い合わせ」ボタンも後ろにしたい。
こんなシーンに今回は遭遇しました。

HTML(デモ)


CSS(デモ)


JavaScript(JQuery)(デモ)


・こちら解説のため要約すると、以下のような形式になっています。

HTML


CSS

このCSSだけで見ると、以下の順番になっていますが、実際は、サイドにある「お問い合わせ」ボタンが一番上に来てしまっています。

①モーダルで開くウィンドウが一番上
②サイドにあるお問い合わせボタンが2番目
③メインのウィンドウが3番目

2.原因

z-indexは、親要素のz-indexの影響を受ける。

つまり、モーダルで開くウィンドウのz-indexは30ですが、その親要素のメインウィンドウがz-index:10であるため、その影響を受けているという事です。

サイドにあるお問い合わせボタンは、メインのウィンドウの外にありますので、z-index:20となりますが、モーダルで開くウィンドウのz-indexは、その親要素のメインウィンドウの影響を受け、z-index:10になるためです。

3.解決策

z-indexが、親要素のz-indexの影響を受けるという事が分かれば、後は簡単です。

それを理解した形で、HTMLやCSSを配置し直せば大丈夫です。

修正したデモ

画像
クリックして下さい。

これは、モーダルウィンドウを表示するテストです。

画像をクリックすると、モーダルウィンドウがポップアップで表示され、クリックされた画像が表示されます。

モーダルウィンドウをポップアップで表示しているので、このモーダルウィンドウがz-index上、一番上に設定される事で、それ以外は後ろに回ります。それにより、関係のないエリアは、周りが黒で透過されます。

よくあるパターンとして、position:fixedで配置されたボタン(お問い合わせボタンやお申し込みボタンなど)がある場合には、本来、このposition:fixedで配置されたボタンも、z-indexでは後ろに回るため、黒く透過されて後ろに配置されなければならないのですが、そうはなっておらず一番上にきてしまっています。

なぜ、このような事が起きてしまうのかを今回は解説させていただきます。

お問い合わせ
× 画像

以上、皆さまのお役に立てれば幸いです。

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU