访问其他divs后面的div [英] accessing divs behind other divs

问题描述

我正在试验一个地图界面，其中整个窗口用（Google）地图填充，而我的应用程序界面（不知道还有什么要称之为菜单，控件等）是浮动的还是当不需要时消失。我建立了实验界面。

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

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

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

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

我将#map z-index设置为-1。如果我不这样做，那么标题开始淡出，并随着鼠标悬停逐渐消失。如果我将地图div移动到标题后面，那么它会遮盖标题。标题的行为很好，地图z-index设置为-1。 换句话说，以下内容无效

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

现在，为什么我无法点击地图的一部分？这就好像#tabs遮蔽了#map，但是#tabs只有300px宽，所以它不应该影响地图的其余部分。

解决方案

这不起作用的原因是因为在您当前的设计中，选项卡 div相对于地图而定位。这意味着标签 div与地图区域重叠，您不能点击它。

如果您更改从相对到绝对的选项卡 div的位置它应该工作。使用绝对定位，您可以根据x和y坐标将标签 div放置在页面的任何位置。

你可以找到更多关于CSS定位的信息这里 a>。

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.

解决方案

The reason why this is not working is because on your current design the tabs div is positioned relative to the map. This means that the tabs div is overlapping the map area and you can't click it.

If you change the position of the tabs div from relative to absolute then it should work. With absolute positioning you can place the tabs div anywhere on the page based on the x and y coordinates.

You can find out more about CSS positioning here.

这篇关于访问其他divs后面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！