最近在優(yōu)化頁面時遇到的問題:在浮動里的絕對定位元素在FF下顯示正常而在IE下被遮擋
?
FF顯示效果:
IE顯示效果:
?
#wrap{overflow:hidden; height:1%; } #wrap li{float:left; margin-right:12px; height:120px; padding:6px; position:relative; ist-style:none; } #wrap li .text{position:absolute; left:120px; top:8px; background:#ccc; border:1px solid #333; width:120px; height:30px; z-index:9999; }
?
<ul id="wrap"> <li style="z-index:100;"> <img src="1.jpg" /> <div class="text">固定文本內(nèi)容</div> </li> <li> <img src="1.jpg" /> <div class="text">固定文本內(nèi)容</div> </li> </ul>
??
從表面上看是第二個浮動元素li遮住了上面的絕對定位層(即上圖的文字層.text),實際上是第二個浮動元素遮住了絕對定位的的父級層(即第一個浮動層li),只要將該父級層的z-index設(shè)定大于是第二個浮動元素即可,也就是說將第一個浮動元素層li的z-index值大于是第二個浮動元素li的z-index值。
?
示例見附件
?
另外一種情況請參考:
IE6 bug: 消失的絕對定位元素 http://www.ued163.com/?p=673
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
