絕對定位div覆蓋可選文本/鏈接

Question

我有一個定位在頁面大塊上的div，這會導致div下面的內容不再是可選/可點擊的。

有沒有辦法解決這個問題？即：讓一個div沒有任何可點擊的功能呢？

#page { 
    width: 980px; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    position: relative; 
} 
#overlay { 
    margin: 0px; 
    padding: 0px; 
    height: 536px; 
    width: 422px; 
    position: absolute; 
    top: -4px; 
    right: -20px; 
    background-image: url(../images/overlay_full.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
} 

Answer 1

如果你真的想在div疊加下（點擊）的東西，沒有體面的方式。一個undecent方式可能是隱藏的mousedown的元素，重新顯示它onmouseup：

document.body.addEventListener("mousedown", function() { getElementById("overlay").style = "display:none;" }); 
document.body.addEventListener("mouseup", function() { getElementById("overlay").style = "display:block;" }); 

但是被警告這是造成迴流與每一個鼠標按下這樣會打擊性能。

Answer 2

您可以使用css z-index屬性使可點擊的對象重疊此掩碼。看看它是如何在這裏工作：

http://www.w3schools.com/css/pr_pos_z-index.asp

Answer 3

有/是個騙子的方法來做到這一點是你把覆蓋在一個div容器，設置爲：

position:fixed; 
overflow:display; 
width:0px; 
height:0px; 

隨後導致它沒有嚴重的地區，但仍然可見。但是我不知道這是否是跨瀏覽器安全的，可能實際上是錯誤的結果。

Answer 4

使用CSS屬性 「指針事件」 上的覆蓋：

#overlay { 
    pointer-events: none; 
} 

見：HTML 「overlay」 which allows clicks to fall through to elements behind it