解决 dropdownlist 覆盖 div 问题

核心提示：问题的出现当你使用一个 div在一些控件所在位置之上显示一些帮助信息时，你也许会遇到控件覆盖 div帮助信息的问题，解决 dropdownlist 覆盖 div 问题，造成这个问题的原因是页面上的控件没有设置 z-index属性， z-index属性决定元素显示的前后层次，因为 div的高和宽都是已知的， 代码在页面的

问题的出现

当你使用一个 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：

<　iframewidth="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值。