是否可以將元素放在另一個元素上而不阻塞後面元素的鏈接？

我不知道如何解決這個問題，我可以想到一個解決方案，我減少頂部元素的寬度，以避免覆蓋鏈接，但我想看看如果這樣做是不可能的。是否可以將元素放在另一個元素上而不阻塞後面元素的鏈接？

問題：將導航欄放在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