DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 如何解決IE6/7絕對定位元素神秘消失或被遮擋的方法
如何解決IE6/7絕對定位元素神秘消失或被遮擋的方法
編輯:前端技巧     
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,可以沖破父級顯示
看下面的代碼:

復制代碼代碼如下:
<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>
  代碼解釋:上面是三個相鄰的相對定位的層,在第一個層裡加了個相對其絕對定位的層,按照理論,這個絕對定位的元素是在三個相對定位元素之上的,但是,實際卻沒有顯示。嘗試設置z-index值也沒有效。
  網上解決這個bug的辦法一般用hack使B為負值,來降低 B 在IE下級別。但是這種方法在z-index為負值時,產生了新的ie bug按照定位的特性,ie的這個bug是可以回避。
  從表面上看下面的層 遮住了上面的絕對定位層,實際上是下面的 層遮住了絕對定位的的父級層,只要將 該父級層的z-index設定大於後面的層即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved