解决dropdownlist覆盖div问题

问题的出现

当你使用一个div在一些控件所在位置之上显示一些帮助信息时，你也许会遇到控件覆盖div帮助信息的问题。造成这个问题的原因是页面上的控件没有设置z-index属性，z-index属性决定元素显示的前后层次，一个z-index值大的元素永远都处在比它z-index值小元素的前方。

Dropdownlist是没有z-index属性的，他们是窗口级的控件，如果你想把一个div显示在Dropdownlist控件上，你就会遇到dropdownlist覆盖div问题。下面的图片展示了这个在IE 6里很普遍的问题。

解决方案

假设在一个ASPX页面中，你想实现当鼠标移动到某个图片时就显示一个div。并且你使用一段 来实现这个效果，在这一段 代码中，你会控制div显示的位置，如果某个combo box 后者 list box 正好在这个地方，用户就会看到这些控件挡住了div的内容。

对这个问题有很多解决方案，我使用了最简单的一种。这个解决方案就是在div显示的地方完全重合的显示一个和div一样大小的 。

你可以很容易的控制这个 的大小，因为div的高和宽都是已知的。

代码

在页面的顶部放一个 ：

<  width="0" scrolling="no" height="0" 
 border="0" class="iballoonstyle" id=" top"></ >

使用 在你想要显示div的地方同时显示这个 ：

var   = document.getElementById(divTip.id);
 .style.display = 'block';
var   = document.getElementById(' top');
 .style.display = 'block';
 .style.width =  .offsetWidth-5;
 .style.height =  .offsetHeight-5;
 .style.left =  .offsetLeft;
 .style.top =  .offsetTop;

在上面的 代码中，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