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