Google マップ、Z インデックス、ドロップダウン Javascript メニュー

StackOverflow https://stackoverflow.com/questions/86604

質問

今日はちょっとした問題に取り組みました。JS ドロップダウン メニューがあり、GoogleMap を挿入すると...メニューは Google マップの背後に表示されます...Google マップの Z インデックスを取得する方法について何かアイデアはありますか?

ありがとう！

役に立ちましたか？

解決

Internet Explorer で問題が発生しても、FireFox または Safari では期待どおりにレンダリングされる場合は、 このリンク 非常に役に立ちました 同様の問題.

要素を「位置：相対」としてマークするという考えに要約されているようです。 CSSでは、IE6と7は、HTMLドキュメントで、直感的で反専用の方法で、その前に来る他の要素と比較して、ITのZ-Indexを台無しにします。おそらく IE8 は「正しく」動作すると思われますが、私自身はテストしていません。

あなたの問題が <SELECT> form 要素ですが、JavaScript を使用して div または uls を操作してドロップダウンのように機能させる場合は、役に立たないと思います。

他のヒント

一部のブラウザではドロップダウン メニューが表示されないことに注意してください (えーっとIE*ahem) zPositioned はまったくできません。ドロップダウンの上に何かを配置したい場合は、「iframe シム」を使用してドロップダウンを隠したり、ドロップダウンを完全に非表示にしたりする必要があります。見る： http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

マップはすでに div 内にラップされています。負の z-index を指定すると機能しますが、1 つ注意点があります。gmaps コントロールはクリックできません。

メニューが div コンテナーでラップされている場合、例: #menuWrap 次に、相対位置を割り当て、高い Z インデックスを与えます。例えば

#menuWrap {
  position: relative;
  z-index: 9999999
}

マップが div 内にあることを確認してください

メニューの Z インデックスを非常に高く設定してみてください。 どうやら Google マップでは、-9000000 から 9000000 の範囲が使用されます。

マップを DIV でラップし、その DIV に z-index 1 を与えます。ドロップダウンを DIV でラップし、より高い値を指定します。

IEでは問題が発生します

相対的に配置された div でラップされたすべての div は、IE で新しい z-index を開始します。IE が外側の相対 div を解釈する方法は、HTML の順序です。最後に定義されたものが一番上になります。相対的に配置された div 内の div の Z インデックスが何であるかは関係ありません。

IEの解決策:htmlで最後に一番上に置くdivを定義します。

(つまり、z-indexはIEで機能しますが、ホルダーdivごとにのみ機能し、すべてのホルダーdivは他のホルダーdivから独立しています)

z-index (特に Internet Explorer 7 では) 私にとっては本当にうまくいきませんでした。高対のさまざまな組み合わせを試しました。マップの Z インデックスは低いですが、喜びはありませんでした。

私にとってこれまでで最も簡単/迅速な答えは、マークアップ/CSS を再配置して、フライアウト/ロールオーバーがマークアップにリストされるようにすることでした。 上/前 私の地図（文字通り、 <div id="map">）、このようにして、 z-index デフォルトのまま (auto) そして、私の Web アプリのより重要な側面に進みます ;)

お役に立てれば！

<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>

Google スタイルのドロップダウンを作成しましたが、同じ問題が発生しました。Google マップ用の V3 API を使用すると、次のコマンドを使用してコントロールを作成し、地図上に配置するだけです。 

map.controls[google.map.ControlPosition.TOP].push(control);

これはドロップダウンであるため、含まれる div の z-index が最も高く (z=3)、メニュー項目を含むドロップダウン部分が含まれる div (z=0) よりも低いことを確認してください。

ここにあります 例.

私の経験から言えば、shim を使用する必要があるのは、プラグイン (Google Earth など) の場合だけです。

マップとメニューの両方に Z インデックスを設定する必要はありません。メニューの Z インデックスをマップよりも高く設定しただけでは、必ずしも機能するとは限りません。

マップ div の z-index を -1 に設定します。これで、メニューがドロップダウンしてマップ上に表示されます。....ただし、ラッパーを使用している場合、マップはラッパーの背後にあるため、インタラクティブではなくなります。

これを回避するには、ラッパー div で onmouseover 関数と onmouseout 関数を使用します。これらがマップ div ではなくラッパー div にあることを確認してください。

onmouseover="getElementById('map').style.zIndex = '10000';" 

onmouseout="getElementById('map').style.zIndex = '-1';"

他のブラウザではページを適切にネゴシエートできるように見える場合でも、!doctype の宣言をうっかり無視すると、IE でこの種の問題が発生することがあります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top