如何解決ie6中select無法被div遮蓋的bug

這篇文章主要介紹如何解決ie6中select無法被div遮蓋的bug，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

使用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一定要設置為負數,不然遮蓋不住.

以上是“如何解決ie6中select無法被div遮蓋的bug”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！