關于IE7 z-index的瀏覽器兼容性問題完美解決方案是怎樣的

關于IE7 z-index的瀏覽器兼容性問題完美解決方案是怎樣的，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

瀏覽器兼容性問題太讓人蛋疼了，今天可是廢在了IE7的z-index問題上。可又不能因為瀏覽器版本低而不去解決，畢竟要從用戶的角度著想。百度了好多還是無法解決，最后google了一下，找到了方法。

直接上例子：

代碼如下:

<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>

代碼如下:

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;}

這是為什么呢？其實這是IE瀏覽器的一個BUG&mdash;&mdash;在IE瀏覽器中，定位元素會產生一個新的stacking context，并且從z-index的值為0開始。所以我們需要在這個元素的父元素上設置一個更高的z-index值。

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

代碼如下:

body { margin: 0; padding: 0; }
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有沒有z-index都無所謂了，但必須同position（relative或absolute）使用,就跟一個人
//生不了孩子一樣，需要配合。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

要想覆蓋住父級的同級 ，父級的z-index就必須別的大，這就跟拼老爸一樣，老爸強你就強，這就是傳說中的哲學啊。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。