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

為城區(qū)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及城區(qū)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、城區(qū)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

瀏覽器兼容性問(wèn)題太讓人蛋疼了，今天可是廢在了IE7的z-index問(wèn)題上?？捎植荒芤?yàn)闉g覽器版本低而不去解決，畢竟要從用戶的角度著想。百度了好多還是無(wú)法解決，最后google了一下，找到了方法。

直接上例子：

代碼如下:

代碼如下:

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——在IE瀏覽器中，定位元素會(huì)產(chǎn)生一個(gè)新的stacking context，并且從z-index的值為0開(kāi)始。所以我們需要在這個(gè)元素的父元素上設(shè)置一個(gè)更高的z-index值。

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

代碼如下:

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有沒(méi)有z-index都無(wú)所謂了，但必須同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)，這就是傳說(shuō)中的哲學(xué)啊。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

標(biāo)題名稱：關(guān)于IE7z-index的瀏覽器兼容性問(wèn)題完美解決方案是怎樣的-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/cojpgj.html