解决div总是被select遮挡的问题

今天在使用ajax下拉框时发现了一个一问题,就是下拉框会被<select>遮挡,选择框的内容是放在div里的,所以去网上找了一下才知道答案:

原来,只要在div内容后面添加如下代码就可以了

<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
载自老徐博客
由于select在ie中默认是处于最顶层的, 所以弹出div往往不能遮住select,但是使用iframe的方法,可以遮住select选择控件.
在div前面加ifram标签，如下设置样式<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>div如下设置属性<div style="z-index:10;position:absolute"></div> 载自：http://my.donews.com/chenyf97/category/web/在IE里，层DIV被下拉框SELECT遮盖，这是IE的bug之一，原因在于select的优先级别比div高。因此无论如何用css属性z-index设置都没用。所以，解决的办法有两种在显示div的时候隐藏所有select 让div里的内容比select的优先级还要高 第一种方法显然比较麻烦，特别是当select比较多且位置不固定的时候，很容易将不该隐藏的也隐藏了。第二钟办法更好一些。常用的优先级比select高的HTML控件有object和iframe，我选用了iframe比较好。原理就是在div种加入一个iframe，然后把需要显示的内容write到iframe的body中。参考代码如下：var oIframe = document.createElement(”<iframe name=\”oIframeFilter\” frameborder=\”0\”></iframe>”) if (oDivFilter.children.length != 0) oDivFilter.removeChild(oDivFilter.children(0)); oDivFilter.appendChild(oIframe); window.frames[oIframe.name].document.write(”<link rel=\”stylesheet\” href=\”/style/css.css\” type=\”text/css\”>”); sBody = “<table><tr><td>哈哈哈哈</td></tr></table>”; window.frames[oIframe.name].document.write(sBody);此外，还需要注意iframe的属性allowTransparency就不能再用了，因为透明就让iframe更高的优先级失效了。



原文地址 http://www.chenjiliang.com/Article/View.aspx?ArticleID=1543&TypeID=30