解决div不能遮挡select的问题

最新推荐文章于 2020-09-01 09:35:08 发布

lai_gb

最新推荐文章于 2020-09-01 09:35:08 发布

阅读量2.2k

点赞数

分类专栏：实用文章文章标签： div iframe xhtml web开发 html jquery

本文链接：https://blog.csdn.net/lai_gb/article/details/4544960

版权

实用文章专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本例子只针对ie6，ie7下好像没有这个问题。

web开发中经常要用到一种效果，就是一个绝对定位的层作为弹出对话框或者弹出提示框，而如果这种弹出层在ie6中却不能遮挡select，网上有很多例子说使用iframe，但却写得不具体。以下是一个较为具体的例子。

1、jquery+div+css

2、代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:script type="text/javascript" src="../js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <select> <option>select1</option> <option>select2</option> </select> <div id="ly2" style="position: absolute; top: 0px; left: 0px; padding: 4px; display: none; background-color: #777; color: #000000; z-index: 100"> <ul style="margin:5px" mce_style="margin:5px"> <li>第1行</li> <li>第2行</li> </ul> </div> <iframe id="ifMask" src="" scrolling="no" frameborder="0" style="position: absolute; display: none;" mce_style="position: absolute; display: none;"></iframe> <br /> <br /> <a οnclick="showDIV()" style="cursor:pointer" mce_style="cursor:pointer">点击</a> <br /> </body> </html>

3、具体做法是通过一个iframe遮挡select，而层又遮挡iframe，把iframe与层的绝对定位设置重叠。

原则可归纳为：div不能遮挡select，iframe能遮挡select，而div却可以遮挡iframe。