使用div制作蒙版或模擬彈出窗口，但在IE6下，當div下方有下拉列表框select元素的時候，下拉列表框會劃破div顯示在div之上，不論z-index設為何值均會出現此問題，可能由於下拉列表控件的彈出式下拉列表的原因導致Z軸高度失控。但是IE6有一個神奇的邏輯，div 無法覆蓋select,但是iframe 可以覆蓋select，而div可以覆蓋iframe，所以解決辦法就是用Z軸高度更高的Iframe元素，包裹或覆蓋住下拉列表框控件，使其回到正常的Z軸高度上來！
html如下:
Html代碼
復制代碼代碼如下:
<div id="acontainnerbox" class="aboxinitcss">
這裡是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
復制代碼代碼如下:
<div id="acontainnerbox" class="aboxinitcss">
這裡是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
css代碼如下:
Html代碼
復制代碼代碼如下:
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
即可解決這個bug.
iframe的z-index一定要設置為負數,不然遮蓋不住.