我正在试验一个 map 界面，其中整个窗口都充满了 (Google) map ，而我的应用程序 chrome(不知道还能调用它什么 -- 菜单、控件等)是 float 的或不需要时消失。我放了一个experimental interface .
当整个页面加载完毕后，顶部菜单会淡出，但如果鼠标光标移动到窗口的顶部边缘，则会重新出现在 View 中。图例选项卡小部件是可折叠和可移动的。
现在，问题来了——对于与选项卡小部件大致对齐的窗口的水平 strip ， map 是不可点击的。您可以看到 map 上的光标从可以访问 map 的手变为无法访问 map 的箭头。在该区域中，所有标记均不可点击， map 也不可拖动。
在网页中，层次结构是这样的
<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>
我将#map z-index 设置为-1。如果我不这样做，那么标题开始淡出并在鼠标悬停时不规律地淡入。 header 在 map z-index 设置为 -1 时表现良好。
如果我在页眉之后移动 map div，那么它会遮盖页眉。换句话说，以下内容不起作用
<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>
照原样，为什么我无法点击 map 的一部分？就好像#tabs 遮挡了#map，然而，#tabs 只有大约 300 像素宽，所以它不应该影响 map 的其余部分。
最佳答案
这不起作用的原因是因为在您当前的设计中，tabs div 是相对于 map 定位的。这意味着 tabs div 与 map 区域重叠，您无法点击它。
如果您将 tabs div 的位置从 relative 更改为 absolute 那么它应该可以工作。使用 absolute 定位，您可以根据 x 和 y 坐标将 tabs div 放置在页面上的任何位置。
您可以找到有关 CSS 定位的更多信息 here .
关于html - 在其他 div 后面访问 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6405981/