解决dropdownlist覆盖div问题

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

问题的出现

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

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

Screenshot - overlapped.jpg

解决方案

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

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

Screenshot - nooverlapped.jpg

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

相关文章
|
6月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
72 0
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
633 3
全选或者单选checkbox的值动态添加到div
全选或者单选checkbox的值动态添加到div
52 0
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
JSON 数据格式
easyUI 的combobox如何获取除valueField和textField外的三个值
easyUI 的combobox如何获取除valueField和textField外的三个值
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
693 0
|
Web App开发 容器
Div并排显示
Div并排显示
|
前端开发
Div与Span标签详解
Div与Span标签详解
316 0
点击事件获得li标签内容
通过点击事件获得li标签内容 Table of contents 随笔 随笔 数据 //点击会显示'数据' function liClick(data){ console.log($(data).text()); }
1368 0