レイヤーの重なりを調整

解決済

質問者：ENTRE
質問日時：2014/03/27 09:28
回答数：2件

クリックプルダウンボタンを配置して、
その下にGoogoleMapを配置していますが、
ボタンをクリックしたときに、
GoogleMapの裏側にメニューが表示され、
メニューが表示されなくなります。

z-index:*;

でレイヤー順序を設定しても、
裏側に表示されてしまいます。

これはGoogleMapが非同期だから仕方がないのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/04/01 15:59

ごく簡単なサンプル。

後から現れているので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_ … href="https://maps.google.co.jp/maps?q=%E9%8C%A6%E5%B8 …
＿＿</div>
＿＿<p>錦帯橋（きんたいきょう）は、山口県岩国市の錦川に架橋された木造のアーチ橋である。</p>
＿＿<p>写真や文章はいずれもWikiより引用</p>
＿＿<div class="figure">
＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/th … 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>