14

今日はちょっとした問題が発生しました。JSドロップダウンメニューがあり、GoogleMapを挿入すると...メニューはGoogleMapの後ろに表示されます...GoogleMapのzインデックスを取得する方法に関するアイデア？

ありがとう！

4

11 に答える 11

8

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

要素を「position:relative;」としてマークするという考えに要約されるようです。CSS で IE6&7 が、直感的でなく、仕様に反する方法で、HTML ドキュメント内でその前にある他の要素に関連する z-index を台無しにします。おそらくIE8は「正しく」動作しますが、自分でテストしていません。

問題がフォーム要素にある場合、Anutron のアドバイスは非常に役立ちますが、<SELECT>JavaScript を使用して div や uls を操作してドロップダウンのように振る舞う場合は、役に立たないと思います。

于 2008-09-18T16:34:22.360 に答える
2

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

于 2008-09-17T20:14:08.533 に答える
2

メニューが div コンテナでラップされている場合、たとえば#menuWrap相対的な位置を割り当て、高い z-index を指定します....たとえば

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

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

于 2010-10-02T16:31:11.640 に答える
2

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

于 2010-09-15T19:13:55.133 に答える
1

IEは問題を与えます

相対位置のdivにラップされているすべてのdivは、IEで新しいz-indexを開始します。IEが外部の相対divを解釈する方法は、htmlの順序です。最後に定義されたものが一番上にあります。相対位置のdiv内のdivのzインデックスが何であっても。

IEの解決策：最後にhtmlで一番上にあるはずのdivを定義します。

（したがって、z-indexはIEで機能しますが、ホルダーdivごとにのみ、すべてのホルダーdivは他のホルダーdivから独立しています）

于 2010-10-25T19:23:24.390 に答える
1

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

于 2008-09-17T20:05:15.140 に答える
1

Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.

于 2008-09-17T19:26:03.313 に答える
0

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

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

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

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

onmouseout="getElementById('map').style.zIndex = '-1';"
于 2011-08-22T21:31:36.360 に答える
0

私はグーグルスタイルのドロップダウンを作成しましたが、同じ問題がありました...グーグルマップ用のV3 APIを使用して、コントロールを作成し、それをマップに配置するだけです。

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

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

これが例です。

私の経験から、シムを使用する必要があるのはプラグイン（Google Earthなど）のみです。

于 2012-04-26T14:24:26.110 に答える
0

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>
于 2011-04-28T15:34:42.977 に答える