Question

我正在尝试使用地图界面，其中整个窗口都填充了（Google）地图，而我的应用程序镶边（不知道还有什么叫它 - 菜单，控件等）是浮动的还是不需要时消失。我提出了experimental interface。

当整个页面加载完毕后，顶部菜单会淡出，但如果鼠标光标移动到窗口的上边缘，则会逐渐消失。图例标签窗口小部件是可折叠和可移动的。

现在，问题是 - 对于窗口的水平条带大致与制表符小部件对齐，地图是不可点击的。您可以看到地图上的光标从可以访问地图的手更改为无法访问地图的箭头。在该频段中，没有一个标记是可点击的，地图也没有可拖动。

在网页中，层次结构就像这样

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

我将#map z-index设置为-1。如果我不这样做，那么标题会逐渐淡出并逐渐淡入鼠标。标题表现正常，map z-index设置为-1。

如果我在标题之后移动地图div，那么它会遮挡标题。换句话说，以下不起作用

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

原样，为什么我无法点击地图的一部分？就好像#tabs模糊了#map，但#tabs只有大约300px宽，所以它不应该影响地图的其余部分。

Answer 1

这不起作用的原因是因为在您当前的设计中，tabs div相对于地图定位。这意味着tabs div与地图区域重叠，您无法单击它。

如果您将tabs div的位置从relative更改为absolute，那么它应该可以正常工作。使用absolute定位，您可以根据x和y坐标将tabs div放在页面的任何位置。

您可以找到有关CSS定位的更多信息here。