Q&A
Chrome 以外の Web ブラウザで確認するとどうなりますか？
また、 Webブラウザの開発者ツールのコンソールで何かメッセージが出ていたりしないでしょうか？
できれば、問題が発生する(再現確認できる) HTML や CSS や JavaScript のコード もしくは問題の状況が確認できる URL を質問への追記していただけないでしょうか？
HTML
1 2<body <?php post_class(); ?>> 3 <header class="header"> 4 <div class="overlay"></div> 5 <div class="menu-trigger"> 6 <span></span> 7 <span></span> 8 <span></span> 9 </div> 10 <nav class="nav-menu"> 11 <ul class="nav-menu-wrapper"> 12 <li class="nav-list"><a href="#">AAA</a></li> 13 <li class="nav-list"><a href="#">BBB</a></li> 14 <li class="nav-list"><a href="#">CCC</a></li> 15 <li class="nav-list"><a href="#">DDD</a></li> 16 <li class="nav-list"><a href="#">EEE</a></li> 17 <li class="nav-list"><a href="#">FFF</a></li> 18 <li class="nav-list"><a href="#">GGG</a></li> 19 <li class="nav-list"><a href="#">HHH</a></li> 20 <li class="nav-list"><a href="#">III</a></li> 21 <li class="nav-list"><a href="#">JJJ</a></li> 22 <li class="nav-list"><a href="#">KKK</a></li> 23 <li class="nav-list"><a href="#">LLL</a></li> 24 </ul> 25 </nav> 26 <div class="header-gnav-wrapper"> 27 </div> 28 </header> 29 <main class="main"> 30 </main> 31 <footer class="footer" id="footer"> 32 </footer> 33 34 <!--for Scroll fix header --> 35<script> 36//scroll fix header 37$(function() { 38 "use strict"; 39 var flag = "view"; 40 41 $(window).on("scroll", function() { 42 // scrollTop()が「500」より大きい場合 43 //画面トップから、ナビゲーションメニューまでの高さ（ピクセル）を指定すれば、メニュースクロールで 44 //消えていくタイミングでヘッダがtop:0の位置に表示されて固定される。 45 if ($(this).scrollTop() > 500) { 46 if (flag === "view") { 47 $(".header-gnav-wrapper").stop().css({ opacity: '1.0' }).animate({ 48 //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に 49 top: 0 50 }, 500); 51 //上にあがり切ったら透過度を0%にして背景が生きるように 52 //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に 53 flag = "hide"; 54 } 55 } else { 56 if (flag === "hide") { 57 $(".header-gnav-wrapper").stop().animate({ top: "-50px", opacity: 0 }, 500); 58 flag = "view"; 59 } 60 } 61 }); 62}); 63$(function() { 64 "use strict"; 65 var flag = "view"; 66 67 $(window).on("scroll", function() { 68 // scrollTop()が「550」より大きい場合 69 //画面トップから、ナビゲーションメニューまでの高さ（ピクセル）を指定すれば、メニュースクロールで 70 //消えていくタイミングでヘッダがtop70の位置に表示されて固定される。 71 if ($(this).scrollTop() > 550) { 72 if (flag === "view") { 73 $(".menu-trigger").stop().css({ opacity: '1.0' }).animate({ 74 //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に 75 top: 70 76 }, 550); 77 //上にあがり切ったら透過度を0%にして背景が生きるように 78 //”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に 79 flag = "hide"; 80 } 81 } else { 82 if (flag === "hide") { 83 $(".menu-trigger").stop().animate({ top: "50px", opacity: 0 }, 500); 84 flag = "view"; 85 } 86 } 87 }); 88}); 89</script> 90<script> 91// smooth scroll 92$(function() { 93 $('a[href^="#"]').click(function() { 94 var speed = 500; 95 var href = $(this).attr("href"); 96 var target = $(href == "#" || href == "" ? 'html' : href); 97 //ヘッダーの高さを取得 98 var header = $('header').height(); 99 //ヘッダーの高さを引く 100 var position = target.offset().top - header; 101 $("html, body").animate({ scrollTop: position }, speed, "swing"); 102 return false; 103 }); 104}); 105</script> 106<script> 107// drawer 108 $('.menu-trigger').on('click',function(){ 109 if($(this).hasClass('active')){ 110 $(this).removeClass('active'); 111 $('.nav-menu').removeClass('open'); 112 $('.overlay').removeClass('open'); 113 } else { 114 $(this).addClass('active'); 115 $('.nav-menu').addClass('open'); 116 $('.overlay').addClass('open'); 117 } 118 }); 119 120 $('.overlay').on('click',function(){ 121 if($(this).hasClass('open')){ 122 $(this).removeClass('open'); 123 $('.menu-trigger').removeClass('active'); 124 $('.nav-menu').removeClass('open'); 125 } 126 }); 127 128 $('a[href^="#"]').click(function(){ 129 var speed = 500; 130 var href= $(this).attr("href"); 131 var target = $(href == "#" || href == "" ? 'html' : href); 132 var position = target.offset().top; 133 $('html, body').animate({scrollTop:position}, speed, 'swing'); 134 return false; 135 }); 136 137 $('.nav-list a').click(function(){ 138 if($('.nav-menu').hasClass('open')){ 139 $('.nav-menu').removeClass('open'); 140 $('.overlay').removeClass('open'); 141 $('.menu-trigger').removeClass('active'); 142 }; 143 }); 144 145$(document).ready(function(){ 146 // $('.access-fadeInDown').hide().fadeIn(5000).animate({'marginTop': '10px'}); 147}); 148 149</script> 150<?php wp_footer(); ?> 151</body> 152</html> 153 154```CSS 155 156/*----------ドロワー ナビゲーション----------*/ 157.header { 158 z-index: 2147483647 !important; 159} 160 161.menu-trigger { 162 display: none; 163} 164.sp-none { 165 display: block; 166 /*z-index: 100;*/ 167} 168.nav-menu { 169 position: relative; 170 top: auto; 171 right: 250px; 172 display: inline-block; 173 width: auto; 174 height: 60px; 175 letter-spacing: 1px; 176 opacity: 1; 177} 178 179.nav-menu .nav-list { 180 display: block; 181 width: 100%; 182} 183 184.nav-list a { 185 display: inline-block; 186 width: 100%; 187 font-weight: bold; 188 padding: 5px 10px; 189 height: 60px; 190 line-height: 60px; 191} 192 193.nav-list a:hover, .nav-list a:active { 194 background-color: rgba(192, 192, 192, 0.7); 195 } 196 197.nav-menu { 198 display: none; 199} 200 201@media screen and (max-width: 1024px) { 202 .overlay { 203 visibility: hidden; 204 position: fixed; 205 top: 0; 206 left: 0; 207 display: block; 208 width: 100%; 209 height: 100%; 210 -webkit-transition: all .5s ease; 211 transition: all .5s ease; 212 z-index: 3; 213 } 214 215 .overlay.open { 216 width: 100%; 217 height: 100%; 218 opacity: 1; 219 z-index: 300; 220 visibility: visible; 221 cursor: pointer; 222 } 223 224 .menu-trigger { 225 display: block; 226 width: 28px; 227 height: 28px; 228 vertical-align: middle; 229 cursor: pointer; 230 position: fixed; 231 right: 20px; 232 z-index: 100; 233 transform: translateX(0); 234 transition: transform 0.7s; 235 opacity: 0; 236 } 237 238 .menu-trigger::after { 239 position: absolute; 240 content: ""; 241 /*top: -30px;*/ 242 right: -20px; 243 width: 60px; 244 height: 60px; 245 background-color: #18448E; 246 display: block; 247 z-index: -10; 248 border-radius: 50%; 249 } 250 251 .menu-trigger.active { 252 transform: translateX(-250px); 253 } 254 255 .menu-trigger span { 256 display: inline-block; 257 box-sizing: border-box; 258 position: absolute; 259 left: 4px; 260 width: 100%; 261 height: 4px; 262 background-color: #fff; 263 border-radius: 2px; 264 transition: 0.7s; 265 } 266 267 .menu-trigger.active span { 268 background-color: #fff; 269 border-radius: 2px; 270 } 271 .menu-trigger span:nth-of-type(1) { 272 top: 20px; 273 } 274 .menu-trigger.active span:nth-of-type(1) { 275 transform: translateY(8px) rotate(-45deg); 276 } 277 .menu-trigger span:nth-of-type(2) { 278 top: 28px; 279 } 280 .menu-trigger.active span:nth-of-type(2) { 281 opacity: 0; 282 } 283 .menu-trigger span:nth-of-type(3) { 284 top: 36px; 285 } 286 .menu-trigger.active span:nth-of-type(3) { 287 transform: translateY(-8px) rotate(45deg); 288 } 289 290 .nav-menu-wrapper { 291 z-index: 2147483647 !important; 292 293 } 294 295 .nav-menu { 296 position: fixed; 297 top: 70px; 298 right: 0; 299 transform: translate(250px); 300 transition: all .7s; 301 width: 250px; 302 text-align: right; 303 display: block; 304 z-index: 2147483647 !important; 305 } 306 .nav-menu.open { 307 transform: translateZ(-250px); 308 background-color: #DFF1F7; 309 z-index: 2147483647 !important; 310 height: calc(100% - 40px); 311 overflow-y: auto; 312 } 313 314 .nav-menu .nav-list { 315 font-weight: bold; 316 } 317 318 .nav-list a { 319 font-size: 1.6rem; 320 border-bottom: 1px solid #fff; 321 display: inline-table; 322 } 323 324} 325 326@media screen and (max-width: 732px) { 327 .menu-trigger { 328 top: 40px !important; 329 opacity: 1 !important; 330 } 331 332 .header-gnav-wrapper { 333 opacity: 1 !important; 334 } 335 336 .nav-menu { 337 top: 40px !important; 338 } 339 340 .header-top { 341 background-color: #18448E; 342 height: 40px !important; 343 position: relative; 344 } 345 346 .header-top-site-title { 347 line-height: 40px !important; 348 } 349 350 .site-title-font-large { 351 font-size: 2.0rem; 352 } 353 354 .header-top-sns-logo { 355 width: 31px !important; 356 transform: none !important; 357 } 358 359 .header-top-facebook-logo { 360 height: 34px !important; 361 top: -18px; 362 } 363 364 .header-top-instagram-logo { 365 top: -5px !important; 366 } 367 368} 369 370# 状況説明 371wordpressでサイト制作中です。 372drower.jsのjQueryを使用し、ドロワーの実装まで終わりました。 373PCのChrome検証ツールではPC、SPとも綺麗に表示されているのですが、スマホ実機（iPhone7、Chrome）で表示確認していたところ、Googleマップの埋め込み（iframe）がドロワーメニューよりも上に表示されてしまっていました。 374ドロワーメニューを 375position: relative; 376z-index: 2147483647 !important; 377まで指定してやりましたが、何も変わらずでした。 378 379何か他に考えられる原因はございますでしょうか。 380 381よろしくお願いします。 382 383 384 385 386編集・追加依頼についての追記 387 388# ■Chrome以外のWebブラウザでの確認について 389・Safariでも実機（iPhone7）で確認してみましたが、同じ現象でした。 390※PCのSafari、Chromeの検証ツールではこの不具合は見られません。 391 392# ■navタグやulタグ周辺、それらの先祖要素にz-indexを付けてみることについて 393当初z-indexを付けていたのは、ul（.nav-menu-wrapper）の親要素（.nav-menu）でかつそれが『openになった要素（.nav-menu .open）』です。ul（.nav-menu-wrapper）にも、その親要素（.nav-menu）にも、さらにその先祖要素（header）にもz-indexを付けてみましたが、やはり変化ありませんでした。 394 395 396以上、よろしくお願いします。
z-index の値を大きくする設定は、ul.drawer-menu に書いているものでしょうか？
その親要素（もしくは更に先祖の要素）の z-indexの値を大きくすると状況が改善しないでしょうか？ nav.drawer-nav あたりです。<iframe>が含まれる要素の親要素や先祖要素にz-indexの値が設定されている場合に、<iframe>が上に乗る事態が考えられます。
回答1件
0
追記いただいたソースで状況が再現しました。
CSS
1.header { 2 z-index: 1; 3 position: relative;/*追加*/ 4} 5
このようにすることで状況が改善しないでしょうか？
z-index は position: relative; などと一緒に書かないと効果がないはずです。（値はstatic以外）
私が試した時は z-index の値も0か1ぐらいでうまくいきましたが、状況にも依ると思いますので、適宜変更くださいませ。
iOS版のsafariでしか起きないという点が興味深いですが、理由については検証していません。
追記
引き続き検証したところ translateZ の値を変更すると、上に来ることがわかりました。
CSS
1.nav-menu.open { 2 transform: translateZ(250px);/*元は-250px*/ 3}
このプロパティがどういう意図で入っていたのかについては理解してないのですが、z-indexではなく、これが影響している可能性があると思います。ご検討ください。
投稿2019/04/01 23:29
編集2019/04/02 01:55総合スコア525
■.headerにposition: relative;を付ける件について
→これはすいません。付けています。ドロワーメニュー部分のCSSはコピペしたのですが、.headerのCSSも載せとこうと思い、手入力した際に、positionを書き忘れた次第です。z-indexの値を0か1にしてみる件については、帰宅後試そうと思います。
ご回答ありがとうございます。
■Safariでしか起きない件について
当方では、スマホでのみChromeでもSafariでも同様な現象（Googleマップがドロワーメニューより上に来る）が起きています。
PCの検証ツールではChromeもSafariもこの現象は起こらないんですよね。。
検証ツール自体が完璧にスマホのブラウザの挙動を再現しているものではないのだろうな、とは思うのですが、ちょっと不思議な現象ではあるな、と思います。
position は設定されていましたか・・それだとこの指摘では解決しないですね。
引き続き検証した結果、transform: translateZ(); の値かもしれないということがわかったので回答を追記しました。
あなたの回答
tips
プレビュー
