谷歌地圖，Z索引和下拉Javascript菜單

我今天在一個小問題上運行：我有一個JS下拉菜單，當我插入GoogleMap時...菜單顯示在Google Map後面...關於如何機會Google Map的z索引的任何想法？谷歌地圖，Z索引和下拉Javascript菜單

謝謝！

來源

2008-09-17 ebarrera

如果您的問題在Internet Explorer中發生，但它使你在Firefox或Safari瀏覽器，this link想到對我來說非常有幫助的有similar problem的方式。

它似乎歸結爲標記元素爲「position：relative;」的想法在CSS中導致IE6 & 7以相對於HTML文檔中其它元素的z-index，以不直觀和反規範的方式混亂。假設IE8的行爲「正確」，但我沒有自己測試過。

如果您的問題與<SELECT>表單元素相關，但Anutron的建議會非常有幫助，但如果您使用JavaScript來操縱div或uls以像下拉菜單那樣操作，我認爲這不會有幫助。

來源

2008-09-18 16:34:22

這是一篇非常有用的文章。謝謝！ – 2010-01-18 17:57:40

嘗試設置你的菜單z-index瘋狂地高。 Apparently谷歌地圖使用從-9000000到9000000的範圍。

來源

2008-09-17 19:26:03

菜單內置在模板中...我不確定我能控制它。這就是爲什麼我要求改變Google Map的z-Index的方法 – ebarrera 2008-09-17 19:49:38

將地圖包裹在DIV中，爲DIV指定z-index 1.將您的下拉列表包裝到DIV中並給它一個更高的值。

來源

2008-09-17 20:05:15

請注意，某些瀏覽器中的下拉菜單（ahem IE * ahem）根本無法定位。如果您想在其上方放置某些內容，則需要使用「iframe填充程序」來隱藏它或完全隱藏下拉列表。請參閱：http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

來源

2008-09-17 20:14:08 Anutron

地圖已經包裝在div中。給它一個負Z指數，它的工作原理 - 一個警告：gmaps控件不可點擊。

來源

2010-09-15 19:13:55 Paolo

如果菜單包裝在div容器中，例如#menuWrap然後將它分配給相對位置並給它一個高z-索引。

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

確保您的地圖是一個div

來源

2010-10-02 16:31:11

IE給出了問題

每一個被包裹在一個相對定位的div將開始在IE中一個新的z-index DIV中。 IE解釋外部相對div的方式按html順序排列。最後定義在最上面。無論相對定位的div內的div的z索引是什麼。

IE的解決方案：定義最後應該在html上的div的div。

（所以z索引不工作在IE瀏覽器，但只有每架格，每個格架是獨立於其他持有人的div）

來源

2010-10-25 19:23:24 Totoro

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-28 15:34:42 electblake

無需爲地圖和菜單設置z-index。如果您只是將菜單的z-index設置爲高於地圖，則不一定有效。

將地圖div的z索引設置爲-1。現在，菜單將下拉並顯示在地圖上.........但如果您使用的是包裝器，則地圖將不再是交互式的，因爲它現在位於包裝器後面。

要解決此問題，請在包裝div中使用onmouseover和onmouseout函數。確保它們在你的包裝div中，而不是你的地圖div。

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

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

來源

2011-08-22 21:31:36 Jason

我創建了谷歌風格的下拉列表，並有同樣的問題...使用谷歌地圖API第3，您只需創建一個控制和使用其放置在地圖上：

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

由於它是一個下拉菜單，只要確保包含div的z-index最高（z = 3），那麼包含菜單項的下拉部分就會低於包含div（z = 0）。

這裏是example。

從我的經驗來看，您需要使用墊片的唯一時間就是插件（就像Google Earth一樣）。

來源

2012-04-26 14:24:26 brims

我發現有時無意中忽略了聲明！doctype在IE中會導致這種打嗝，當其他瀏覽器似乎能夠協商好頁面時。

來源

2013-08-13 02:32:37

谷歌地圖，Z索引和下拉Javascript菜單

回答

相關問題