IE絕對定位元素神秘消失或被遮擋的解決

2022-04-04 19:51:33 字數 895 閱讀 8788

在進行網頁布局的時候,經常會根據需要設定相對,絕對以及浮動定位;

發現了乙個奇妙的現象:

1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6/7,ff中顯示一致;

2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,有清除浮動時,ie6/7不顯示絕對定位層,ff顯示;

3.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,以及沒有清除浮動時,ie6不顯示絕對定位層,ie7/ff顯示;

4.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,有清除浮動時,ie6/7不顯示絕對定位層,ff顯示;

要解決這個bug的方法也很簡單,讓絕對定位層不挨著浮動層放置就好了,還有個更簡單的方法,在絕對定位元素和其他元素之間加乙個空白的div。

再來看看絕對定位元素神秘消失被遮擋的現象

先了解一下所涉及到的幾個定位特性:

1. 相對定位元素預設的z-index的數值是0。 

2. 當兩個相對定位同時出現時,**靠後的z-index優先。

3. 子級遵循父級設定的z-index;如果子級設定了絕對定位、z-index,可以衝破父級顯示

看下面的**:

**解釋:上面是三個相鄰的相對定位的層,在第乙個層裡加了個相對其絕對定位的層,按照理論,這個絕對定位的元素是在三個相對定位元素之上的,但是,實際卻沒有顯示。嘗試設定z-index值也沒有效。

網上解決這個bug的辦法一般用hack使b為負值,來降低 b 在ie下級別

但是這種方法在z-index為負值時,產生了新的ie bug

按照定位的特性,ie的這個bug是可以迴避的

從表面上看 下面的層 遮住了上面的絕對定位層,實際上是下面的 層遮住了絕對定位的的父級層,只要將 該父級層 的z-index設定大於後面的層即可

IE6中絕對定位元素消失問題

今天在做頁面的時候發現在ie6中絕對定位元素神秘消失了。下面是隨手寫的示例 在ie6中的顯示效果 在其它瀏覽器中的顯示效果 在藍色理想中有大神給出了以下解釋 1 當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6 7,ff中顯示一致 2 當絕對定位層的鄰近浮動層的寬度不等於父...

關於IE6下絕對定位元素莫名消失的問題

一般來說,讓絕對定位的元素不挨著浮動元素就ok了 1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6 7,ff中顯示一致 2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,有清除浮動時,ie6 7不顯示絕對定位層,ff顯示 3.當絕對定位層的鄰近浮動層的寬度等於父層寬度...

FireFox正常 IE錯位的絕對定位元素

ie 一如既往地帶來問題。真的,我覺得 ie 堅持自己的一套無所謂,不支援或者不完全支援標準也無所謂。但是,ie6 ie7 ie8 這三個版本都有各自不同的表現,實在是太讓人難受了。前兩天碰到了這個奇怪的問題 絕對定位的元素,緊鄰著兩個浮動元素。firefox 中一切正常,ie6 中絕對定位元素消失...