IE7下position的z-index Bug解決方案

通常設置position後，通過z-index屬性來設置div的層疊情況。

但是在IE7中，設置position後，z-index會失效。導致div的層疊出現問題。

具體效果可以看這個頁面

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

以下分別是IE7與IE8之間的差別：

請先認真看他們的HTML和CSS信息：

HTML結構

XHTML

1 2 3 4

<div id="container">     <div id="box1">This box should be on top</div> </div> <div id="box2">This box should not be on top; IE however seems to create a new stacking context for positioned elements, even when the computed z-index of that element is 'auto'.</div>

CSS

1 2 3 4 5

body { margin: 0; padding: 0; } #container { position: relative; } #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10; } #content { width: 420px; padding: 20px; }

正常理解是應該顯示上圖右邊的那種情況，但是IE7上的確是一件很怪異的事情，查了許多資料終於找到了解決方案:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. So we giving the parent element a higher z-index actual fixes the bug

以上告訴我們，IE設置了position的元素會生成一個新的stacking context，導致 z-index 爲0，所以才失效了。所以我們需要在這個元素的父元素上設置一個更高的z-index值。

在上述的box1中的父元素container設置一個更大的z-index就能解決這個問題，如下：

CSS

1	#container { position: relative; z-index:30;}