訪問其他divs後面的div

我正在試驗一個地圖界面，其中整個窗口中充滿了（Google）地圖和我的應用程序鑲邊（不知道還有什麼要調用它 - 菜單，控件等）在不需要時浮動或消失。我已經提出了一個experimental interface。訪問其他divs後面的div

當整個頁面已經加載時，頂部菜單淡出，但是如果鼠標光標移動到窗口的頂部邊緣，則會重新消失。圖例標籤小部件是可摺疊和可移動的。

現在，這裏是問題 - 對於與標籤小部件大致對齊的窗口的水平行，地圖是不可點擊的。您可以看到地圖上的光標從地圖可訪問的手變爲無法訪問地圖的箭頭。在該頻段中，沒有任何標記可點擊，地圖也不可拖動。

在網頁層次是像這樣

<div id="map">map</div> 
<header></header> 
<div id="tabs"></div> 
<footer></footer>

我有#map的z-index設置爲-1。如果我不這樣做，那麼標題開始淡出，並隨着鼠標懸停逐漸消失。標題行爲很好，地圖z-index設置爲-1。

如果我移動標題後的地圖div，那麼它會遮蓋標題。換句話說，以下行不通

<header></header> 
<div id="map">map</div> 
<div id="tabs"></div> 
<footer></footer>

原來是，爲什麼我不能點擊一部分地圖？這就好像#tabs遮蔽了#map，但是，#tabs只有300px寬，所以它不應該影響地圖的其餘部分。

來源

2011-06-20 punkish

解決該問題的一種方法是將'tabs' div更改爲'position：absolute'。你有什麼特別的理由說明你爲'position：relative'？ – sarcastyx

#tabs內的內容不正確。嘗試審查它的CSS。當我刪除#tabs的高度時，地圖可點擊 – Ibu

sarcastyx，我沒有做出相對的位置（除非通過未明確設置位置，小部件被定位爲相對位置）。 lbu，是的，在摺疊#tabs時，地圖上的大多數*變成可點擊。但是，地圖的一小部分仍然無法點擊。很明顯，#tabs是來自地圖的方式，但我無法弄清楚爲什麼，因爲#tabs只有300px寬。 – punkish

這不起作用的原因是因爲在您當前的設計中，tabs div相對於地圖定位。這意味着tabs div與地圖區域重疊，您不能單擊它。

如果您將tabs div的位置從relative更改爲absolute，那麼它應該可以工作。通過absolute定位，您可以根據x和y座標將tabs div放在頁面的任何位置。

你可以找到更多關於CSS定位here。

來源

2011-06-21 09:21:42 sarcastyx

訪問其他divs後面的div

回答

相關問題