CSS問題：當其他元素被定位爲「絕對」時，頁面上的鏈接變得不可點擊

Question

這是我試圖縮短的更長的故事。一般來說，我正在玩一個網站菜單，該菜單應該部分滑動到部分透明的背景GIF圖像下，並且只有在鼠標懸停後才能完全展示自己。爲此，我在背景圖片和菜單上都使用了z-index參數。但是因爲你不能在正文背景圖像上使用z-index，所以我使用了一個「常規」圖像，我將它設置爲100％的寬度和高度，而對於z-index參數的工作，我需要以指定「位置」。看起來雖然這個組合，我基本上創造了一個無形的盾牌，將使所有的聯繫不可觸摸。我已經煮熟它歸結爲以下行：

<style> 
#style { 
    position: absolute; 
    width:100%; 
    height:100%; 
} 
</style> 

<div id="style"></div> 
<a href="">test</a> 

如果你試試這個，你會看到「測試」的鏈接是無法點擊（跨瀏覽器）。

有沒有人有一個想法，我可以解決這個問題？謝謝！

Answer 1

感謝您的回覆，這表明我的方向正確。看來這個div確實創造了一個無形的盾牌，並且這個盾牌（或多或少）在涉及底層鏈接時是無法穿透的。

Click through a DIV to underlying elements

@Logan：恐怕方法並不爲我工作。你建議簡單地提高div盾之上的鏈接 - 然而，這會破壞我上面描述的原始目的（背景圖片和菜單下面的目標）。

@campino：I 想法這就是它，但是將「z-index」的定義添加到「style」後再次破壞了它。事實上，你給整個div區域上色，這幫助我理解你已經知道的東西：只要div超過了鏈接，它就不是可點擊的，句號。

所以總而言之，我得出結論說我的方法行不通。對於實際的項目，我可能會將我的非對稱背景圖片分割成幾部分，因此div不會覆蓋整個屏幕，而只是我絕對需要的部分。

Answer 2

<style> 
#style { 
    background-color:#ccc; 
    position: absolute; 
    width:100%; 
    height:100%; 
} 
a {position:relative} /*won't change position of the link, but shows link above.*/ 
</style> 



<div id="style"></div> 
<a href="#">test</a> 

Answer 3

<style> 
#style { 
    position: absolute; 
    width:100%; 
    height:100%; 
    z-index: -1; 
} 

.test { 
    z-index: 99; 
} 
</style> 

<div id="style"></div> 
<a href="" class="test">test</a> 

也能工作，與campino2k的答案一起。

Answer 4

我認爲設置一個z-index，雖然它可能工作並不能真正解決問題，但它是一種達到你想要的效果的黑客。

不可鏈接的鏈接的根本原因主要是通過floating, display, or position屬性不正確定位的元素。此元素顯示在鏈接的前景中，創建一個防止您點擊鏈接的屏蔽。

解決這個，我發現是使用javascript/jquery到console.log或alert的id或元素的class在前臺當你點擊。

$('*').click(function(){ 
    alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id')); 
}); 

上面會警告前景中的元素。現在你知道原因看它的風格。