天天看點

解決dropdownlist覆寫div問題

問題的出現

當你使用一個div在一些控件所在位置之上顯示一些幫助資訊時,你也許會遇到控件覆寫div幫助資訊的問題。造成這個問題的原因是頁面上的控件沒有設定z-index屬性,z-index屬性決定元素顯示的前後層次,一個z-index值大的元素永遠都處在比它z-index值小元素的前方。

Dropdownlist是沒有z-index屬性的,他們是視窗級的控件,如果你想把一個div顯示在Dropdownlist控件上,你就會遇到dropdownlist覆寫div問題。下面的圖檔展示了這個在IE 6裡很普遍的問題。

解決dropdownlist覆寫div問題

解決方案

假設在一個ASPX頁面中,你想實作當滑鼠移動到某個圖檔時就顯示一個div。并且你使用一段JavaScript來實作這個效果,在這一段JavaScript代碼中,你會控制div顯示的位置,如果某個combo box 後者 list box 正好在這個地方,使用者就會看到這些控件擋住了div的内容。

對這個問題有很多解決方案,我使用了最簡單的一種。這個解決方案就是在div顯示的地方完全重合的顯示一個和div一樣大小的iframe。

解決dropdownlist覆寫div問題

你可以很容易的控制這個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

繼續閱讀