我有一個絕對定位的div,它像一個工具提示一樣工作。鼠標懸停在某個元素上,然後隱藏在鼠標外面。在工具提示元素上方放置的頁面中,我有幾個<select>
元素。在正常情況下,tooltip div將出現在select標籤上。但是,當用戶點擊選擇標籤並顯示選項時,它將與工具提示重疊。爲選擇或選項標籤提供更高的z-index不起作用。如何選擇重疊絕對定位DIV的選項?
下面是一個示例代碼來說明該問題。
<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;
}
這在所有的瀏覽器?或只是資源管理器什麼版本?在早期版本的瀏覽器(
steveax
爲什麼不要將您的工具提示放置在選擇的一側。那樣,那不會發生。 – Joseph
這不是在IE6中重疊選擇標籤的問題。只有選擇標籤內的選項纔會出現在div上方。它不適用於Firefox,IE8,IE9和Chrome。沒有在任何其他瀏覽器中測試過。 @fskreuz工具提示是動態添加的,因此它可以出現在頁面的任何位置。 –