使DIV不被select等控件遮挡的解决办法

简介: 在IE中,select属于window类型控件,它会“挡住”所有非window类型控件 可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的, 他们被渲染在客户区的绘画表面上, 而select是使用的标准windows控件,只是作为客户区的子控件放置而已, 它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件, 比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

     在IE中,select属于window类型控件,它会“挡住”所有非window类型控件
可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
他们被渲染在客户区的绘画表面上,
而select是使用的标准windows控件,只是作为客户区的子控件放置而已,
它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,
比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

有4种办法;
1. 修改select,不用标准select,而是自己用其他html元素模拟
2. 修改你的div,使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。

第4种方法的例子:

<html>
<head>
<script>
function DivSetVisible(state){
     var DivRef = document.getElementById('PopupDiv');
     var IfrRef = document.getElementById('DivShim');
    if(state){
                  DivRef.style.display = "block";
                  IfrRef.style.width = DivRef.offsetWidth;
                  IfrRef.style.height = DivRef.offsetHeight;
                  IfrRef.style.top = DivRef.style.top;
                  IfrRef.style.left = DivRef.style.left;
                  IfrRef.style.zIndex = DivRef.style.zIndex - 1;
                  IfrRef.style.display = "block";
   }else{
                 DivRef.style.display = "none";
                 IfrRef.style.display = "none";
   }
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
目录
相关文章
|
机器学习/深度学习 人工智能 并行计算
5分钟掌握开源图神经网络框架DGL使用
近几年神经网络在人工智能领域的成功应用,让它备受关注和热捧。但是,它自身依然具有本质上的局限性,以往的神经网络都是限定在欧式空间内,这和大多数实际应用场景并不符合,因此,也阻碍了它在很多领域的实际落地应用。
5分钟掌握开源图神经网络框架DGL使用
|
存储 数据可视化 数据处理
Python中读取Excel文件的方法
【2月更文挑战第18天】
1027 4
Python中读取Excel文件的方法
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
453 3
|
12月前
|
jenkins 测试技术 持续交付
Docker最佳实践:构建高效的CI/CD流水线
【10月更文挑战第17天】在现代软件开发实践中,持续集成(Continuous Integration, CI)和持续部署(Continuous Deployment, CD)已成为提高开发效率和软件质量的重要手段。Docker作为一种容器技术,为构建一致且隔离的开发环境提供了强有力的支撑。本文将探讨如何利用Docker来优化CI/CD流程,包括构建环境的标准化、镜像管理以及与CI/CD工具(如Jenkins、GitLab CI)的集成。
443 5
|
边缘计算 人工智能 测试技术
什么是虚拟机技术?
拟机技术作为现代计算环境中的重要组成部分,极大地丰富了我们对资源管理和系统部署的理解与实践。本文将深入探讨虚拟机的定义、工作原理、应用场景、优势、主要技术以及未来发展趋势,帮助读者全方位地理解虚拟机这一强大技术。
605 7
|
缓存 JSON 前端开发
webpack超详细教程,学webpack看这一篇就够了!(上)
webpack超详细教程,学webpack看这一篇就够了!(上)
|
SQL 存储 Java
Python-sqlparse解析SQL工具库一文详解(一)
Python-sqlparse解析SQL工具库一文详解(一)
4805 113
Python-sqlparse解析SQL工具库一文详解(一)
报错:cannot read properties of undefined(reading ‘forEach‘)
报错:cannot read properties of undefined(reading ‘forEach‘)
1129 1
报错:cannot read properties of undefined(reading ‘forEach‘)
|
前端开发 流计算
css:text-decoration给文字增加上划线、删除线、下划线
css:text-decoration给文字增加上划线、删除线、下划线
2944 0
css:text-decoration给文字增加上划线、删除线、下划线
|
JavaScript Linux C++
Docker构建Node.js应用镜像
Docker构建Node.js应用镜像
729 0