我不确定如何解决这个问题，我可以想到一个解决方案，我可以减少顶部元素的宽度以避免覆盖链接，但我想看看是否可以不这样做。
问题:在 Google map 的顶部放置一个导航栏，而不阻挡“ map ”和“卫星”链接。
编辑:这里的例子 http://www.lobagola.com/contacts.html
我想知道他们是怎么做到的，即使上面有一个元素，你仍然可以点击 map 和卫星链接。
最佳答案
考虑 CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events" rel="noreferrer noopener nofollow">pointer-events</a>: none
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
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>关于html - 是否可以将一个元素放在另一个元素之上而不阻塞后面元素的链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28254841/