DropDownList 和 DIV 重叠问题

• 下载 ComboOverlappingProblem - 21.2 KB

背景

当您想在 div 控件上显示工具提示时，您可能会遇到一些问题，例如控件显示在前面，工具提示文本显示在背景中。 当您页面上的控件没有 z-index 并且您想要使用 div 显示工具提示时，就会出现此问题。 z-index 属性设置元素的堆叠顺序。 堆叠顺序较大的元素始终位于堆叠顺序较小的元素的前面。

下拉列表框和列表框没有 z-index 属性； 这些是窗口级控件。 当您想在包含这些控件的页面中显示 div 时，您将面临重叠问题。 下面的屏幕显示了下拉列表和列表框控件。 这些控件将与显示工具提示文本的 div 重叠。 这是一个众所周知的 IE 6 浏览器问题。

解决方案

例如，假设您在 APSX 页面中有一个 div，并且您想在鼠标悬停在图像上时显示它。 您将编写 JavaScript 来隐藏/显示此 div。 在此 JavaScript 中，您将控制 div 的位置以及在哪里显示它。 现在，如果存在一些窗口控件（如组合框或列表框），那么用户将无法在 div 中看到完整的文本，因为这些控件与 div 重叠。

可能有很多解决方案可以解决这个问题，但我正在使用一种非常简单的方法。 这种方法使用 iframe，它在 div 的确切位置显示一个 iframe。 此外，iframes 应该与 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。

关注点

• .NET 技术
• MS CRM
• BizTalk Server

历史

• 2007 年 8 月 29 日 -- 发布原始版本
• 2007 年 9 月 4 日 -- 文章已编辑并移至主要的 CodeProject.com 文章库