如何解決IE6/7絕對(duì)定位元素神秘消失或被遮擋的方法
發(fā)布時(shí)間：2011-07-22 13:53:04 作者：佚名 
我要評(píng)論
我要評(píng)論在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)根據(jù)需要設(shè)置相對(duì)定位，絕對(duì)以及浮動(dòng)定位最近突然發(fā)現(xiàn)了一個(gè)奇妙的現(xiàn)象：IE6下絕對(duì)定位元素神秘消失或被遮擋, 首先是IE絕對(duì)定位元素神秘消失,設(shè)置的絕對(duì)定位元素,突然從IE瀏覽器下消失了，然而火狐能正常顯示. 嘗試對(duì)絕對(duì)定位元素進(jìn)行
1.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度不等于父層寬度時(shí)，以及沒(méi)有清除浮動(dòng)時(shí)，IE6/7，F(xiàn)F中顯示一致；
2.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度不等于父層寬度時(shí)，有清除浮動(dòng)時(shí)，IE6/7不顯示絕對(duì)定位層，F(xiàn)F顯示；
3.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度等于父層寬度時(shí)，以及沒(méi)有清除浮動(dòng)時(shí)，IE6不顯示絕對(duì)定位層，IE7/FF顯示；
4.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度等于父層寬度時(shí)，有清除浮動(dòng)時(shí)，IE6/7不顯示絕對(duì)定位層，F(xiàn)F顯示；
要解決這個(gè)BUG的方法也很簡(jiǎn)單，讓絕對(duì)定位層不挨著浮動(dòng)層放置就好了，還有個(gè)更簡(jiǎn)單的方法，在絕對(duì)定位元素和其他元素之間加一個(gè)空白的div。
再來(lái)看看絕對(duì)定位元素神秘消失被遮擋的現(xiàn)象，先了解一下所涉及到的幾個(gè)定位特性：
1. 相對(duì)定位元素默認(rèn)的z-index的數(shù)值是0。
2. 當(dāng)兩個(gè)相對(duì)定位同時(shí)出現(xiàn)時(shí)，代碼靠后的z-index優(yōu)先。
3. 子級(jí)遵循父級(jí)設(shè)定的z-index；如果子級(jí)設(shè)定了絕對(duì)定位、z-index，可以沖破父級(jí)顯示
看下面的代碼：
<div style=”position:relative; background:#FF0000; width:200px; height:100px;”>
<div style=”position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100“></div>
</div>
<div style=”position:relative; background:#000000; width:200px; height:100px;”></div>
<div style=”position:relative; background:#9900FF; width:200px; height:100px;”></div>
代碼解釋?zhuān)荷厦媸侨齻€(gè)相鄰的相對(duì)定位的層，在第一個(gè)層里加了個(gè)相對(duì)其絕對(duì)定位的層，按照理論，這個(gè)絕對(duì)定位的元素是在三個(gè)相對(duì)定位元素之上的，但是，實(shí)際卻沒(méi)有顯示。嘗試設(shè)置z-index值也沒(méi)有效。
網(wǎng)上解決這個(gè)bug的辦法一般用hack使B為負(fù)值，來(lái)降低 B 在IE下級(jí)別。但是這種方法在z-index為負(fù)值時(shí)，產(chǎn)生了新的ie bug按照定位的特性，ie的這個(gè)bug是可以回避。
從表面上看下面的層 遮住了上面的絕對(duì)定位層，實(shí)際上是下面的 層遮住了絕對(duì)定位的的父級(jí)層，只要將 該父級(jí)層的z-index設(shè)定大于后面的層即可。
2.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度不等于父層寬度時(shí)，有清除浮動(dòng)時(shí)，IE6/7不顯示絕對(duì)定位層，F(xiàn)F顯示；
3.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度等于父層寬度時(shí)，以及沒(méi)有清除浮動(dòng)時(shí)，IE6不顯示絕對(duì)定位層，IE7/FF顯示；
4.當(dāng)絕對(duì)定位層的鄰近浮動(dòng)層的寬度等于父層寬度時(shí)，有清除浮動(dòng)時(shí)，IE6/7不顯示絕對(duì)定位層，F(xiàn)F顯示；
要解決這個(gè)BUG的方法也很簡(jiǎn)單，讓絕對(duì)定位層不挨著浮動(dòng)層放置就好了，還有個(gè)更簡(jiǎn)單的方法，在絕對(duì)定位元素和其他元素之間加一個(gè)空白的div。
再來(lái)看看絕對(duì)定位元素神秘消失被遮擋的現(xiàn)象，先了解一下所涉及到的幾個(gè)定位特性：
1. 相對(duì)定位元素默認(rèn)的z-index的數(shù)值是0。
2. 當(dāng)兩個(gè)相對(duì)定位同時(shí)出現(xiàn)時(shí)，代碼靠后的z-index優(yōu)先。
3. 子級(jí)遵循父級(jí)設(shè)定的z-index；如果子級(jí)設(shè)定了絕對(duì)定位、z-index，可以沖破父級(jí)顯示
看下面的代碼：
復(fù)制代碼
代碼如下:<div style=”position:relative; background:#FF0000; width:200px; height:100px;”>
<div style=”position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100“></div>
</div>
<div style=”position:relative; background:#000000; width:200px; height:100px;”></div>
<div style=”position:relative; background:#9900FF; width:200px; height:100px;”></div>
代碼解釋?zhuān)荷厦媸侨齻€(gè)相鄰的相對(duì)定位的層，在第一個(gè)層里加了個(gè)相對(duì)其絕對(duì)定位的層，按照理論，這個(gè)絕對(duì)定位的元素是在三個(gè)相對(duì)定位元素之上的，但是，實(shí)際卻沒(méi)有顯示。嘗試設(shè)置z-index值也沒(méi)有效。
網(wǎng)上解決這個(gè)bug的辦法一般用hack使B為負(fù)值，來(lái)降低 B 在IE下級(jí)別。但是這種方法在z-index為負(fù)值時(shí)，產(chǎn)生了新的ie bug按照定位的特性，ie的這個(gè)bug是可以回避。
從表面上看下面的層 遮住了上面的絕對(duì)定位層，實(shí)際上是下面的 層遮住了絕對(duì)定位的的父級(jí)層，只要將 該父級(jí)層的z-index設(shè)定大于后面的層即可。
相關(guān)文章
IE6下div層被select控件遮住的問(wèn)題解決方法
IE6下層被select控件遮住的問(wèn)題想必大家在布局過(guò)程中都有遇到過(guò)吧，其實(shí)解決方法很簡(jiǎn)單就是在層里套個(gè)iframe，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-19IE中div被視頻遮住(用embed來(lái)內(nèi)嵌視頻)的解決方法
使用embed來(lái)內(nèi)嵌視頻，因?yàn)橐曨l是windows media player，上面想用div浮動(dòng)一些內(nèi)容，最后設(shè)定了windowlessVideo=1終于解決，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-07- 浮層遮擋情況想必大家在測(cè)試網(wǎng)頁(yè)布局師會(huì)有遇到過(guò)吧，如果浮層中的元素覆蓋的區(qū)域含有設(shè)置了postion:relative的元素，在IE7中浮層就有可能無(wú)法遮擋這些元素，下面是具體的2013-05-07
- 今天有任務(wù)讓加個(gè)蒙版，JS小白的我在網(wǎng)上找了個(gè)修改下，改成了JS模版以后可以重復(fù)用啦,本文將詳細(xì)介紹DIV遮罩層如何實(shí)現(xiàn)，需要的 朋友可以參考下2012-11-20
巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼
巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼，需要的朋友可以參考下2012-04-09div背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果
背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)2011-12-08div背景半透明 覆蓋整個(gè)可視區(qū)域的遮罩層效果
背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)2011-10-30ie6 select無(wú)法被div遮蓋的bug解決方法
使用div制作蒙版或模擬彈出窗口，但在IE6下，當(dāng)div下方有下拉列表框select元素的時(shí)候，下拉列表框會(huì)劃破div顯示在div之上，不論z-index設(shè)為何值均會(huì)出現(xiàn)此問(wèn)題，可能由于下2011-07-29利用js+css簡(jiǎn)單實(shí)現(xiàn)半透明遮罩彈窗
用到遮罩彈窗時(shí)在網(wǎng)上搜索，看到絕大多數(shù)都是基于Jquery的。我不想用那么復(fù)雜的應(yīng)用，于是自己寫(xiě)了一個(gè)。2011-07-27- css 遮罩樣式（支持IE和FireFox） ，需要的朋友可以參考下。2011-01-27