問題的出現
當你使用一個div在一些控件所在位置之上顯示一些幫助資訊時,你也許會遇到控件覆寫div幫助資訊的問題。造成這個問題的原因是頁面上的控件沒有設定z-index屬性,z-index屬性決定元素顯示的前後層次,一個z-index值大的元素永遠都處在比它z-index值小元素的前方。
Dropdownlist是沒有z-index屬性的,他們是視窗級的控件,如果你想把一個div顯示在Dropdownlist控件上,你就會遇到dropdownlist覆寫div問題。下面的圖檔展示了這個在IE 6裡很普遍的問題。

解決方案
假設在一個ASPX頁面中,你想實作當滑鼠移動到某個圖檔時就顯示一個div。并且你使用一段JavaScript來實作這個效果,在這一段JavaScript代碼中,你會控制div顯示的位置,如果某個combo box 後者 list box 正好在這個地方,使用者就會看到這些控件擋住了div的内容。
對這個問題有很多解決方案,我使用了最簡單的一種。這個解決方案就是在div顯示的地方完全重合的顯示一個和div一樣大小的iframe。
你可以很容易的控制這個iframe的大小,因為div的高和寬都是已知的。
代碼
在頁面的頂部放一個iframe:
<iframe width="0" scrolling="no" height="0"
frameborder="0" class="iballoonstyle" id="iframetop">
</iframe>
使用JavaScript在你想要顯示div的地方同時顯示這個iframe:
var layer = document.getElementById(divTip.id);
layer.style.display = 'block';
var iframe = document.getElementById('iframetop');
iframe.style.display = 'block';
iframe.style.width = layer.offsetWidth-5;
iframe.style.height = layer.offsetHeight-5;
iframe.style.left = layer.offsetLeft;
iframe.style.top = layer.offsetTop;
在上面的JavaScript代碼中,divTip.id是你要顯示div的ID值。
原文位址:
http://www.codeproject.com/KB/dotnet/Overlapping.aspx參考文檔:
http://topic.csdn.net/t/20050909/11/4259391.html http://www.cnblogs.com/zhc088/archive/2007/08/22/864981.html