ベストアンサー

レイヤーの重なりを調整

2014/03/27 09:28

クリックプルダウンボタンを配置して、その下にGoogoleMapを配置していますが、ボタンをクリックしたときに、 GoogleMapの裏側にメニューが表示され、メニューが表示されなくなります。 z-index:*; でレイヤー順序を設定しても、裏側に表示されてしまいます。これはGoogleMapが非同期だから仕方がないのでしょうか？

ENTRE
お礼率0% (16/2525)

CSS
回答数2
ありがとう数6

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/04/01 15:59 回答No.2

ごく簡単なサンプル。　後から現れているのでz-indexは不要!! ★タブは＿に置換してあるので戻す。 ★http: はhttp：（全角)に置換してあるので戻すこと。 ★スマホ以上のディスプレイ対応のリキッド　ディスプレイ幅・フォントサイズを変えてもＯＫ。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みのHTML4.01strict+CSS2.1 ☆HTMLが文書構造だけ本来の順番で書かれていると悩む事はない。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="iframe"> ＿＿＿<iframe title="googleMap" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E9%8C%A6%E5%B8%AF%E6%A9%8B&aq=&sll=34.728949,138.455511&sspn=38.735678,55.810547&t=m&brcurrent=3,0x354534156c9e8a49:0x99326655385bf768,0&ie=UTF8&hq=&hnear=&ll=34.167596,132.17841&spn=0.006295,0.006295&output=embed"><a href="https://maps.google.co.jp/maps?q=%E9%8C%A6%E5%B8%AF%E6%A9%8B&hl=ja&ie=UTF8&ll=34.168086,132.178402&spn=0.009623,0.013626&sll=34.728949,138.455511&sspn=38.735678,55.810547&brcurrent=3,0x3545343e9d3a0af1:0x1de6e24f5c8d3786,0&t=m&z=16&iwloc=A">googleMap</a></iframe> ＿＿</div> ＿＿<p>錦帯橋（きんたいきょう）は、山口県岩国市の錦川に架橋された木造のアーチ橋である。</p> ＿＿<p>写真や文章はいずれもWikiより引用</p> ＿＿<div class="figure"> ＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Kintaikyou_bridge.JPG/1280px-Kintaikyou_bridge.JPG" width="800" height="150" alt="錦帯橋周辺パノラマ"> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>日本三名橋＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>日本橋</li> ＿＿＿＿＿＿<li>錦帯橋</li> ＿＿＿＿＿＿<li>眼鏡橋</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>日本三奇橋＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>錦帯橋</li> ＿＿＿＿＿＿<li>猿橋</li> ＿＿＿＿＿＿<li>かずら橋</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<ul> ＿＿＿＿<li>日本三名橋＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>日本橋</li> ＿＿＿＿＿＿<li>錦帯橋</li> ＿＿＿＿＿＿<li>眼鏡橋</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>日本三奇橋＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>錦帯橋</li> ＿＿＿＿＿＿<li>猿橋</li> ＿＿＿＿＿＿<li>かずら橋</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>