访问其他 div 后面的 div
我正在尝试一个地图界面，其中整个窗口都充满了（Google）地图，并且我的应用程序镶边（不知道还能叫什么——菜单、控件等）在以下情况下浮动或消失：不需要。我已经建立了一个实验界面。
加载整个页面后，顶部菜单会淡出，但如果鼠标光标移动到窗口的顶部边缘，则会重新显示在视图中。图例选项卡小部件是可折叠和可移动的。
现在，问题来了——对于与选项卡小部件大致对齐的窗口的水平区域，地图是不可单击的。您可以看到地图上的光标从可以访问地图的手形变为无法访问地图的箭头。在该区域中，所有标记都不可单击，地图也不可拖动。
在网页中，层次结构如下所示，因此
<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 的宽度只有 300 像素左右，因此它不会影响地图的其余部分。
I am experimenting with a map interface where the entire window is filled with the (Google) map, and my app chrome (don't know what else to call it -- the menues, controls, etc.) are floating or fade away when not required. I have put up an experimental interface.
When the entire page has loaded, the top menu fades out, but dissolves back into view if the mouse cursor moves to the top edge of the window. the legend tabs widget is collapsible and movable.
Now, here is the problem -- for a horizontal swath of the window approximately aligned with the tabs widget, the map is unclickable. You can witness the cursor over the map change from a hand where the map is accessible to an arrow where the map is not accessible. In that band, none of the markers are clickable, nor is the map draggable.
In the web page, the hierarchy is like so
<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>
I have the #map z-index set to -1. If I don't do that, then the header starts fading out and fading in on mouseover erratically. The header behaves fine with map z-index set to -1.
If I move the map div after header, then it obscures the header. In other words, the following doesn't work
<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>
As is, why am I not able to click on a portion of the map? It is as if #tabs is obscuring #map, however, #tabs is only about 300px wide, so it shouldn't affect the rest of the map.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不起作用的原因是在您当前的设计中，
tabsdiv 是相对于地图定位的。这意味着tabsdiv 与地图区域重叠，您无法单击它。如果将
tabsdiv 的位置从relative更改为absolute那么它应该可以工作。通过绝对定位，您可以根据 x 和 y 坐标将tabsdiv 放置在页面上的任何位置。您可以在此处了解有关 CSS 定位的更多信息。
The reason why this is not working is because on your current design the
tabsdiv is positioned relative to the map. This means that thetabsdiv is overlapping the map area and you can't click it.If you change the position of the
tabsdiv fromrelativetoabsolutethen it should work. Withabsolutepositioning you can place thetabsdiv anywhere on the page based on the x and y coordinates.You can find out more about CSS positioning here.