是否可以在不阻挡背元素链接的情况下将元素放在另一个元素之上？
Her*_*ari 4 html css html5 css3
我不知道如何处理这个问题,我可以想到一个解决方案,我减少顶部元素的宽度,以避免掩盖链接,但我想看看这是否可行,如果没有这样做.
问题:将导航栏放在Google地图地图的顶部,而不会阻止"地图"和"卫星"链接.
编辑:示例 http://www.lobagola.com/contacts.html
我想知道他们是如何实现的,你仍然可以点击地图和卫星链接,即使它上面有一个元素.
小智 5
考虑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>