200902050233IE6 IE7 CSS z-index Bug

下面的顏色區塊在 IE6 、 IE7 由上到下看到的順序會是,在 Firefox 、 Google Chrome 、 IE8 、 IE9 則會是

上面的 HTML 如下︰

<div style="z-index: 1; background-color: #0f0; position: absolute; 
  top: 20px; left: 20px; width: 120px; height: 120px;"></div>
<div style="background-color: #00f; position: relative; 
  width: 180px; height: 180px;">
  <div style="z-index: 2; background-color: #f00; position: absolute; 
    top: 40px; left: 40px; width: 120px; height: 120px;"></div>
</div>

由上面的 HTML 我們可以得知︰

  1. 紅色綠色有 z-index ,藍色沒有。
  2. 都有 position : relative 或 position : absolute 。
  3. 紅色沒有 z-index 的藍色的子 node 。

問題來了!按照 W3C 標準,只有有 position : relative 或 position : absolute ,又有 z-index 值,且值不是 auto 的元件才會產生一個新的 stacking context ,但由上面的例子看來, IE6 、 IE7 只要元件有 position : relative 或 position : absolute 就會產生一個新的 stacking context 。

這邊用上面的例子簡單介紹 stacking context 。在 IE6 、 IE7 因為藍色產生了一個 stacking context ,所以身為藍色子 node 的紅色,其 z-index 比較基準是藍色。而因為藍色綠色之下,所以紅色的 z-index 不論設得多大,都不可能到綠色之上。而在符合 W3C 標準的瀏覽器,因為藍色沒有產生另一個 stacking context ,所以紅色綠色的 z-index 比較基準是相同的,因此紅色可以到綠色之上。

更詳盡的 stacking context 說明請參考 The stacking context - MDN

延伸
回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite