Question

我不确定如何处理这个问题，我可以想到一个解决方案，我减少顶部元素的宽度以避免覆盖链接，但我想看看这是否可行而不这样做。 / p>

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

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

我想知道他们是如何实现的，你仍然可以点击地图和卫星链接，即使它上面有一个元素。

Answer 1

考虑CSS pointer-events: none

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

＆＃13;

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);

＆＃13;

 #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 */
  }

＆＃13;

<!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>

＆＃13;

Answer 2

可以将CSS属性pointer-events: none应用于地图上的条形图，这样就可以让鼠标事件通过它。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 3

该链接为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

Answer 4

与thanix相似。但是我会等待加载完成然后碰撞z-index

$('.gmnoprint').css({z-index : 10});

是否可以在不阻挡背元素链接的情况下将元素放在另一个元素之上？

4 个答案: