質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • JavaScript

    21544questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9388questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8566questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Google API

    719questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

  • Google マップ

    440questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

wordpressでドロワーメニューより上にグーグルマップの埋め込みが表示される

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 161

Web-Fuji

score 4

<body <?php post_class(); ?>>
    <header class="header">
        <div class="overlay"></div>
        <div class="menu-trigger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="nav-menu">
            <ul class="nav-menu-wrapper">
                <li class="nav-list"><a href="#">AAA</a></li>
                <li class="nav-list"><a href="#">BBB</a></li>
                <li class="nav-list"><a href="#">CCC</a></li>
                <li class="nav-list"><a href="#">DDD</a></li>
                <li class="nav-list"><a href="#">EEE</a></li>
                <li class="nav-list"><a href="#">FFF</a></li>
                <li class="nav-list"><a href="#">GGG</a></li>
                <li class="nav-list"><a href="#">HHH</a></li>
                <li class="nav-list"><a href="#">III</a></li>
                <li class="nav-list"><a href="#">JJJ</a></li>
                <li class="nav-list"><a href="#">KKK</a></li>
                <li class="nav-list"><a href="#">LLL</a></li>
            </ul>
        </nav>
        <div class="header-gnav-wrapper">
        </div>
    </header>
    <main class="main">
    </main>
    <footer class="footer" id="footer">
    </footer>

    <!--for Scroll fix header -->
<script>
//scroll fix header
$(function() {
    "use strict";
    var flag = "view";

    $(window).on("scroll", function() {
    // scrollTop()が「500」より大きい場合
   //画面トップから、ナビゲーションメニューまでの高さ(ピクセル)を指定すれば、メニュースクロールで
   //消えていくタイミングでヘッダがtop:0の位置に表示されて固定される。  
        if ($(this).scrollTop() > 500) {
            if (flag === "view") {
                $(".header-gnav-wrapper").stop().css({ opacity: '1.0' }).animate({
                    //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
                    top: 0
                }, 500);
                //上にあがり切ったら透過度を0%にして背景が生きるように
            //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
                flag = "hide";
            }
        } else {
            if (flag === "hide") {
                $(".header-gnav-wrapper").stop().animate({ top: "-50px", opacity: 0 }, 500);
                flag = "view";
            }
        }
    });
});
$(function() {
    "use strict";
    var flag = "view";

    $(window).on("scroll", function() {
    // scrollTop()が「550」より大きい場合
   //画面トップから、ナビゲーションメニューまでの高さ(ピクセル)を指定すれば、メニュースクロールで
   //消えていくタイミングでヘッダがtop70の位置に表示されて固定される。  
        if ($(this).scrollTop() > 550) {
            if (flag === "view") {
                $(".menu-trigger").stop().css({ opacity: '1.0' }).animate({
                    //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
                    top: 70
                }, 550);
                //上にあがり切ったら透過度を0%にして背景が生きるように
            //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
                flag = "hide";
            }
        } else {
            if (flag === "hide") {
                $(".menu-trigger").stop().animate({ top: "50px", opacity: 0 }, 500);
                flag = "view";
            }
        }
    });
});
</script>
<script>
// smooth scroll
$(function() {
    $('a[href^="#"]').click(function() {
        var speed = 500;
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        //ヘッダーの高さを取得
        var header = $('header').height();
        //ヘッダーの高さを引く
        var position = target.offset().top - header;
        $("html, body").animate({ scrollTop: position }, speed, "swing");
        return false;
    });
});
</script>
<script>
// drawer
    $('.menu-trigger').on('click',function(){
      if($(this).hasClass('active')){
        $(this).removeClass('active');
        $('.nav-menu').removeClass('open');
        $('.overlay').removeClass('open');
      } else {
        $(this).addClass('active');
        $('.nav-menu').addClass('open');
        $('.overlay').addClass('open');
      }
    });

    $('.overlay').on('click',function(){
      if($(this).hasClass('open')){
        $(this).removeClass('open');
        $('.menu-trigger').removeClass('active');
        $('.nav-menu').removeClass('open');
      }
    });

    $('a[href^="#"]').click(function(){
      var speed = 500;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('html, body').animate({scrollTop:position}, speed, 'swing');
      return false;
    });

  $('.nav-list a').click(function(){
      if($('.nav-menu').hasClass('open')){
      $('.nav-menu').removeClass('open');
      $('.overlay').removeClass('open');
      $('.menu-trigger').removeClass('active');
      };
  });

$(document).ready(function(){
  // $('.access-fadeInDown').hide().fadeIn(5000).animate({'marginTop': '10px'});
});

</script>
<?php wp_footer(); ?>
</body>
</html>

CSS

/*----------ドロワー ナビゲーション----------*/
.header {
z-index: 2147483647 !important;
}

.menu-trigger {
display: none;
}
.sp-none {
display: block;
/*z-index: 100;*/
}
.nav-menu {
position: relative;
top: auto;
right: 250px;
display: inline-block;
width: auto;
height: 60px;
letter-spacing: 1px;
opacity: 1;
}

.nav-menu .nav-list {
display: block;
width: 100%;
}

.nav-list a {
display: inline-block;
width: 100%;
font-weight: bold;
padding: 5px 10px;
height: 60px;
line-height: 60px;
}

.nav-list a:hover, .nav-list a:active {
background-color: rgba(192, 192, 192, 0.7);
}

.nav-menu {
display: none;
}

@media screen and (max-width: 1024px) {
.overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 3;
}

.overlay.open {
width: 100%;
height: 100%;
opacity: 1;
z-index: 300;
visibility: visible;
cursor: pointer;
}

.menu-trigger {
display: block;
width: 28px;
height: 28px;
vertical-align: middle;
cursor: pointer;
position: fixed;
right: 20px;
z-index: 100;
transform: translateX(0);
transition: transform 0.7s;
opacity: 0;
}

.menu-trigger::after {
position: absolute;
content: "";
/*top: -30px;*/
right: -20px;
width: 60px;
height: 60px;
background-color: #18448E;
display: block;
z-index: -10;
border-radius: 50%;
}

.menu-trigger.active {
transform: translateX(-250px);
}

.menu-trigger span {
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 4px;
width: 100%;
height: 4px;
background-color: #fff;
border-radius: 2px;
transition: 0.7s;
}

.menu-trigger.active span {
background-color: #fff;
border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
top: 20px;
}
.menu-trigger.active span:nth-of-type(1) {
transform: translateY(8px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
top: 28px;
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
top: 36px;
}
.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-8px) rotate(45deg);
}

.nav-menu-wrapper {
z-index: 2147483647 !important;

}

.nav-menu {
position: fixed;
top: 70px;
right: 0;
transform: translate(250px);
transition: all .7s;
width: 250px;
text-align: right;
display: block;
z-index: 2147483647 !important;
}
.nav-menu.open {
transform: translateZ(-250px);
background-color: #DFF1F7;
z-index: 2147483647 !important;
height: calc(100% - 40px);
overflow-y: auto;
}

.nav-menu .nav-list {
font-weight: bold;
}

.nav-list a {
font-size: 1.6rem;
border-bottom: 1px solid #fff;
display: inline-table;
}

}

@media screen and (max-width: 732px) {
.menu-trigger {
top: 40px !important;
opacity: 1 !important;
}

.header-gnav-wrapper {
opacity: 1 !important;
}

.nav-menu {
top: 40px !important;
}

.header-top {
background-color: #18448E;
height: 40px !important;
position: relative;
}

.header-top-site-title {
line-height: 40px !important;
}

.site-title-font-large {
font-size: 2.0rem;
}

.header-top-sns-logo {
width: 31px !important;
transform: none !important;
}

.header-top-facebook-logo {
height: 34px !important;
top: -18px;
}

.header-top-instagram-logo {
top: -5px !important;
}

}

状況説明

wordpressでサイト制作中です。
drower.jsのjQueryを使用し、ドロワーの実装まで終わりました。
PCのChrome検証ツールではPC、SPとも綺麗に表示されているのですが、スマホ実機(iPhone7、Chrome)で表示確認していたところ、Googleマップの埋め込み(iframe)がドロワーメニューよりも上に表示されてしまっていました。
ドロワーメニューを
position: relative;
z-index: 2147483647 !important;
まで指定してやりましたが、何も変わらずでした。

何か他に考えられる原因はございますでしょうか。

よろしくお願いします。

イメージ説明

編集・追加依頼についての追記

■Chrome以外のWebブラウザでの確認について

・Safariでも実機(iPhone7)で確認してみましたが、同じ現象でした。
※PCのSafari、Chromeの検証ツールではこの不具合は見られません。

■navタグやulタグ周辺、それらの先祖要素にz-indexを付けてみることについて

当初z-indexを付けていたのは、ul(.nav-menu-wrapper)の親要素(.nav-menu)でかつそれが『openになった要素(.nav-menu .open)』です。ul(.nav-menu-wrapper)にも、その親要素(.nav-menu)にも、さらにその先祖要素(header)にもz-indexを付けてみましたが、やはり変化ありませんでした。

以上、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2019/04/01 12:44 編集

    Chrome 以外の Web ブラウザで確認するとどうなりますか?

    また、 Webブラウザの開発者ツールのコンソールで何かメッセージが出ていたりしないでしょうか?

    できれば、問題が発生する(再現確認できる) HTML や CSS や JavaScript のコード もしくは問題の状況が確認できる URL を質問への追記していただけないでしょうか?

    キャンセル

  • marlboro_tata

    2019/04/01 14:01

    z-index の値を大きくする設定は、ul.drawer-menu に書いているものでしょうか?
    その親要素(もしくは更に先祖の要素)の z-indexの値を大きくすると状況が改善しないでしょうか? nav.drawer-nav あたりです。<iframe>が含まれる要素の親要素や先祖要素にz-indexの値が設定されている場合に、<iframe>が上に乗る事態が考えられます。

    キャンセル

回答 1

0

追記いただいたソースで状況が再現しました。

.header {
    z-index: 1;
    position: relative;/*追加*/
}

このようにすることで状況が改善しないでしょうか?

z-index は position: relative; などと一緒に書かないと効果がないはずです。(値はstatic以外)

私が試した時は z-index の値も0か1ぐらいでうまくいきましたが、状況にも依ると思いますので、適宜変更くださいませ。
iOS版のsafariでしか起きないという点が興味深いですが、理由については検証していません。

追記
引き続き検証したところ translateZ の値を変更すると、上に来ることがわかりました。

.nav-menu.open {
    transform: translateZ(250px);/*元は-250px*/
}

このプロパティがどういう意図で入っていたのかについては理解してないのですが、z-indexではなく、これが影響している可能性があると思います。ご検討ください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/02 09:42 編集

    ■.headerにposition: relative;を付ける件について
    →これはすいません。付けています。ドロワーメニュー部分のCSSはコピペしたのですが、.headerのCSSも載せとこうと思い、手入力した際に、positionを書き忘れた次第です。z-indexの値を0か1にしてみる件については、帰宅後試そうと思います。
    ご回答ありがとうございます。

    ■Safariでしか起きない件について
    当方では、スマホでのみChromeでもSafariでも同様な現象(Googleマップがドロワーメニューより上に来る)が起きています。
    PCの検証ツールではChromeもSafariもこの現象は起こらないんですよね。。

    キャンセル

  • 2019/04/02 10:27

    検証ツール自体が完璧にスマホのブラウザの挙動を再現しているものではないのだろうな、とは思うのですが、ちょっと不思議な現象ではあるな、と思います。
    position は設定されていましたか・・それだとこの指摘では解決しないですね。

    キャンセル

  • 2019/04/02 10:57

    引き続き検証した結果、transform: translateZ(); の値かもしれないということがわかったので回答を追記しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21544questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9388questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8566questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Google API

    719questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

  • Google マップ

    440questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。