2011-11-18 92 views
16

我有一個絕對定位的div,它像一個工具提示一樣工作。鼠標懸停在某個元素上,然後隱藏在鼠標外面。在工具提示元素上方放置的頁面中,我有幾個<select>元素。在正常情況下,tooltip div將出現在select標籤上。但是,當用戶點擊選擇標籤並顯示選項時,它將與工具提示重疊。爲選擇或選項標籤提供更高的z-index不起作用。如何選擇重疊絕對定位DIV的選項?

enter image description here

下面是一個示例代碼來說明該問題。

<body> 
<h1>Select Options Overlapping Absolute Positioned DIV</h1> 

<select name="some-name"> 
    <option>United States</option> 
    <option>Canada</option> 
    <option>Mexico</option> 
    <option>Japan</option> 
</select> 

<div id="top-layer"> 
    <h2>Overlapping Div</h2> 
</div> 
</body> 

CSS

select, options{ z-index:10;} 

#top-layer { 
    background:#ccc; 
    color:#000; 
    border:solid 1px #666; 
    position:absolute; 
    top:45px; 
    left:70px; 
    z-index:100; 
} 
+0

這在所有的瀏覽器?或只是資源管理器什麼版本?在早期版本的瀏覽器( steveax

+0

爲什麼不要將您的工具提示放置在選擇的一側。那樣,那不會發生。 – Joseph

+1

這不是在IE6中重疊選擇標籤的問題。只有選擇標籤內的選項纔會出現在div上方。它不適用於Firefox,IE8,IE9和Chrome。沒有在任何其他瀏覽器中測試過。 @fskreuz工具提示是動態添加的,因此它可以出現在頁面的任何位置。 –

回答

2

否元件將應用z-index值而不還具有position屬性(絕對,相對的,固定的,等等)。

嘗試將position:relative添加到您的select,以便它繼承z-index值。

See this screencast for a more in depth explanation.

+0

即使設置'position:relative'到'select'和'options',它也不起作用。 –

+0

您是否將選擇的z-index更改爲高於彈出窗口? – motoxer4533

+0

我將tooltip的z-index設置得高於select。 –

0

嘗試:

form, select, options{ z-index:10;} 

也許形式標籤給它的覆蓋。它應該像你一樣工作,因爲IE確實考慮了z-index。

問候, -D

+0

即使爲'form'標籤指定'z-index',它也不起作用。 –

3

按照規格(http://docs.webplatform.org/wiki/html/elements/option

除背景色和顏色,通過風格對象的選項元素應用的樣式設置將被忽略。

因此,z-index屬性將被忽略,默認行爲是顯示文檔上所有元素上方的下拉列表。

1

這工作(使用jQuery - 應該叫在鼠標懸停事件):

var $select = $("select").blur(); 
if ($.browser.webkit) { 
    $select.hide(); 
    setTimeout(function() { 
    $select.show() 
    }, 5); 
} 

模糊,似乎在IE7-9和FF就夠了。 Webkit不尊重這個(錯誤是針對這個提出的),所以解決方案似乎是快速隱藏和顯示選擇框。

-1

隱藏通過腳本選擇是可用的當前選項