溢出：絕對位置元素旁邊的可見鏈接不可點擊

我有兩個絕對定位的div元素，它們彼此相鄰放置。第一個div元素有overflow: visible，並且在相鄰的div元素頂部有一個長內容鏈接。我試圖點擊從鄰居div鏈接，沒有運氣 - 在Chrome和Firefox。這適用於IE9。一些代碼示例將解釋什麼，我試圖做 -溢出：絕對位置元素旁邊的可見鏈接不可點擊

<div> 
    <a href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a> 
</div> 
<div class="two"> 
</div>

而且樣式表：

div{ 
position: absolute; 
height: 50px; 
width: 80px; 
border: 2px solid; 
overflow: visible; 
white-space: nowrap; 
z-index: 1; 
} 
.two{ 
left:82px; 
} 
a{ 
z-index: 2; 
}

的jsfiddle：http://jsfiddle.net/yzSwL/1/

有什麼建議？我認爲z-index可能會有所幫助，但沒有。當鼠標在第二個div上時，鏈接文本也不可選。

在此先感謝。

UPDATE

其實我的情況是比較複雜的話，我就讓上，因爲我不知道其中的答案會去。指針事件看起來像最乾淨的解決方案，但不幸的是我不能使用它，因爲所有的div可能都有鏈接。

一個更現實的jsfiddle：http://jsfiddle.net/yzSwL/6/

只是爲了解釋什麼，我試圖讓AT-我想提出一個時間表應用程序含有小時網格有很多彼此相鄰定位的div。每個div可以有一個鏈接。鏈接的寬度是約會的長度。

來源

2012-08-09 Danny C

可以通過爲類。二

指針希望把重點放在頂格設置pointer-events:none;做到這一點，但如果你告訴它不，它會去那是背後的股利。

工作小提琴：http://jsfiddle.net/yzSwL/2/

來源

2012-08-09 11:18:41 Andy

看起來不錯，但是如果我需要div 2中的鏈接呢？ – 2012-08-09 11:52:29

然後用'{pointer-events：all; }'。如在這裏看到的：http://jsfiddle.net/yzSwL/7/ – Andy 2012-08-09 12:17:39

不錯！謝謝。從來沒有聽說過指針事件。我想這解釋了爲什麼它在IE9中工作，而不是其他人。 – 2012-08-09 12:55:02

你將不得不在IE 9和以下使用pointer-events歌劇問題，也。

我稍微調整了您的HTML CSS http://jsfiddle.net/GVL5e/

來源

2012-08-09 11:22:03

其實它已經在IE9中工作，正是這個原因，不支持指針事件。 – 2012-08-09 13:05:07

這是一個很好的解決方案。我用你的方法在絕對位置拉伸的圖像上顯示相對位置的div。該div有所有鏈接和按鈕元素不可點擊。謝謝。 – Sunil 2016-05-25 01:44:08

有很多的解決方案，但你必須要改變風格：

不要強迫你的div有固定的寬度
設置overflow:hidden;
刪除white-space: nowrap;

來源

2012-08-09 11:22:05

我需要所有這些CSS規則進行佈局。我想保持相同的佈局，只是讓鏈接可點擊。 – 2012-08-09 11:24:35

好..我明白了:) – 2012-08-09 11:26:23

在您的代碼中，您將相同的z-index分配給兩個DIV。

而是試着給第二個DIV分配一個較低的z-index。

 div{ 
position: absolute; 
height: 50px; 
width: 80px; 
border: 2px solid; 
overflow: visible; 
white-space: nowrap; 
z-index: 10; 
} 
.two{ 
left:82px; 
    z-index: 5; 
}

來源

2012-08-09 11:22:46 Gabriel

此規則不起作用：

a{ 
z-index: 2; 
}

這不是正好安置的a，但其父div。 z-index only applies to positioned elements.

你應該做的卻是這樣的：

div{ 
    ... 
    z-index: 2; 
} 
.two{ 
    ... 
    z-index: 1; 
}

http://jsfiddle.net/yzSwL/4/

還要注意的是，即使你要添加position: absolute到a，使z-index爲它工作，它會仍然不要在.two之上。這隻會導致它位於位於其父母div（其堆疊上下文）內的其他元素之上。

來源

2012-08-09 11:36:15 mercator

溢出：絕對位置元素旁邊的可見鏈接不可點擊

回答

相關問題