访问其他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

回答

相关问题