是否可以将元素放在另一个元素上而不阻塞后面元素的链接？

我不知道如何解决这个问题，我可以想到一个解决方案，我减少顶部元素的宽度，以避免覆盖链接，但我想看看如果这样做是不可能的。是否可以将元素放在另一个元素上而不阻塞后面元素的链接？

问题：将导航栏放在Google Maps地图的顶部，而不会阻止“地图”和“卫星”链接。

编辑：这里的例子 http://www.lobagola.com/contacts.html

我不知道他们是如何实现它，你还可以点击地图和卫星链路，即使在它上面的元素。

2015-01-31 Hero Stradivari

@ruakh 很抱歉，如果这是一个有点混乱！基本上，我有一个页面设置，其中包含一个全宽谷歌地图，以及一个顶部导航菜单（我张贴的图像的黑暗部分）。不幸的是，设置页面后，我没有意识到Map |谷歌地图的卫星链接被菜单阻止。 – 2015-01-31 18:13:14

它看起来不错，谢谢。 – 2015-01-31 18:19:35

在我看来，只有两种方法：要么重做顶部的按钮，将它们的点击链接到点击下面的按钮（相当糟糕，恕我直言），或抬起按钮的Z轴，并把你的东西放在。两者都是非最佳解决方案，但第二个解决方案好得多。我想不出另一种方式去做。 – 2015-01-31 18:24:29

-1

该链接将是position:relative与z-index而页面标题具有透明背景position:absolute顶部的地图/背景，从而使链接可点击。

position：absolute将页面标题从流中移出并将其置于屏幕顶部，而链接上的z-index使用户可以看到它进行交互。

.link { 
    float: right; 
    position:relative; 
    z-index:10; 
} 

.page-header { 
    width: 400px; 
    height: 50px; 
    background: white; 
    position: absolute; 
    top: 0; 
    left: 0; 
    list-style: none; 
    margin: 0; 
}

你可以看到这里的工作示例[1]，对比，与页标题用白色背景这里[2]

[1] http://jsbin.com/nawuva/1/edit

[2] http://jsbin.com/nawuva/2/edit

来源

2015-01-31 18:52:36 thanix

我的不好，没有预见到谷歌地图坐在iframe中。 'pointer-events：none'是正确的解决方案。 – thanix 2015-01-31 20:48:25

考虑CSS pointer-events : none

none
元素永远不是鼠标事件的目标;然而，如果这些后裔将指针事件设置为某个其他值，则鼠标事件可能会将其后代元素作为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在它们到/来自后代的路上适当地触发该父元素上的事件侦听器。

function initialize() { 
 
     var mapCanvas = document.getElementById('map-canvas'); 
 
     var mapOptions = { 
 
      center: new google.maps.LatLng(44.5403, -78.5463), 
 
      zoom: 8, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     } 
 
     var map = new google.maps.Map(mapCanvas, mapOptions) 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
     width: 100%; 
 
     height: 200px; 
 
     } 
 
#nav{ 
 
    color: #FFF; 
 
    pointer-events: none; /* disabled mouse interaction */ 
 
    z-index: 10; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-left:12px; 
 
    } 
 

 
#nav ul li{ 
 
    display:inline; 
 
    margin-left:10px; 
 
    } 
 
#nav ul a{ 
 
    text-decoration:none; 
 
    pointer-events: auto; /* re-enable mouse interaction for links */ 
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="nav"> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="map-canvas"></div> 
 
    </body> 
 
</html>

来源

2015-01-31 19:04:08

-1

到thanix类似。不过，我会等待加载完成，然后撞击的z-index