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

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

瀏覽器兼容性問題太讓人蛋疼了，今天可是廢在了IE7的z-index問題上?？捎植荒芤?yàn)闉g覽器版本低而不去解決，畢竟要從用戶的角度著想。百度了好多還是無法解決，最后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;}

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

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

代碼如下:

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）使用,就跟一個(gè)人
//生不了孩子一樣，需要配合。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

要想覆蓋住父級(jí)的同級(jí) ，父級(jí)的z-index就必須別的大，這就跟拼老爸一樣，老爸強(qiáng)你就強(qiáng)，這就是傳說中的哲學(xué)啊。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。