使div浮動(dòng)層顯示在Select組件上面
來源：http://www.jojobox.cn/blog/article.asp?id=27
這個(gè)也是現(xiàn)學(xué)現(xiàn)賣了，沒有什么特好的方法，先看一下博主的這個(gè)吧
一、發(fā)現(xiàn)問題
問題：綠色的浮動(dòng)層被select組件“咬掉了一塊”。
代碼部分：浮動(dòng)層
<div class="submenutvc" id="tvc" >
<dl><a href="#">汽車</a></dl>
<dl><a href="#">化妝品</a></dl>
<dl><a href="#">房地產(chǎn)</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
二、找到方法
上網(wǎng)搜索了一下之后發(fā)現(xiàn)，這個(gè)是html語言的通病，只能通過某些優(yōu)先級(jí)更加高的組件來遮蓋。
在CSDN社區(qū)里看到有人給出解決方案：
引用內(nèi)容
有的朋友通過把div的內(nèi)容放入iframe或object里來解決。
可惜這樣會(huì)破壞頁面的結(jié)構(gòu)，互動(dòng)性不大好。
這里采用的方法是：
雖說div直接蓋不住select
但是div可以蓋iframe，而iframe可以蓋select,
所以，把一個(gè)iframe來當(dāng)作div的底，
這個(gè)div就可以蓋住select了.
層與主頁面的互動(dòng)是窗口間的互動(dòng)
２“用一個(gè)iframe當(dāng)div的底”后，
層與主頁面的互動(dòng)是窗口內(nèi)的互動(dòng)
另外，對(duì)于方法１，
層的大小變化就會(huì)要求iframe的大小隨著變化
從主頁面到這個(gè)層會(huì)導(dǎo)致window的blur.
對(duì)于方法２，
只是在原有的div前加上這一句
<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>
試用大家的方法之后發(fā)現(xiàn)還是有一點(diǎn)小問題，出來的是白色浮動(dòng)，而不是本來應(yīng)該出來的綠色浮動(dòng)層。
問題依然存在：
三、調(diào)試完成
最后發(fā)現(xiàn)應(yīng)該稍作修改，一下代碼是最終的方案：
1、在iframe的style里面一定要加上z-index而且要設(shè)為-1,這樣它就不會(huì)把原來的div層也一起覆蓋掉。
2、把<iframe></iframe>放在div層的上面就可以了。
程序代碼：
<iframe style="position:absolute;z-index:-1;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0">
</iframe>
<div class="submenutvc" id="tvc">
<dl><a href="#">汽車</a></dl>
<dl><a href="#">化妝品</a></dl>
<dl><a href="#">房地產(chǎn)</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
