最近幾天在做一個(gè)網(wǎng)站建設(shè)項(xiàng)目，我負(fù)責(zé)的一個(gè)前端模塊，主要是多級(jí)菜單的，其實(shí)就用到了position:relative;和position:absolute;結(jié)果就出現(xiàn)了一個(gè)常見的IE7及一下瀏覽器的bug，而chrome、火狐、IE7+都沒有出現(xiàn)這樣的問題。那么是什么問題呢？就是因?yàn)闉榱藢?duì)元素進(jìn)行絕對(duì)定位并讓它優(yōu)先顯示，但在IE7下無效。先來看拆分的代碼（以下代碼實(shí)際上不是項(xiàng)目模塊本身的代碼，而是為了在這里重現(xiàn)這個(gè)現(xiàn)象，隨意寫的類似代碼）。

HTML部分。

<div class=”top”>
<div class=”t”>
<div class=”post”>今天得關(guān)注我</div>
</div>
</div>
<t;div class=”bot”>
<div class=”post”>2</div>
</div>

CSS部分

.top{ height:100px; width:400px; margin:0 auto; background:#f00; position:relative;}
.top .t{ width:200px; margin:0 auto; position:relative; z-index:10;}
.top .post { position:absolute; top:100px; left:0; width:100px; height:120px; background:#000; color:#fff; line-height:100px; text-align:center; z-index: 100;}
.bot{ height:200px;width:400px; margin: 0 auto; background:#ccc; position:relative;}
.bot .post{ position:absolute; bottom:10px; right:10px; width:20px; height:20px; background:#fff; z-index:99;}

這就是項(xiàng)目出現(xiàn)問題模塊的一個(gè)簡(jiǎn)化版HTML+CSS，當(dāng)然實(shí)際上項(xiàng)目中比這里要復(fù)雜多，包含還有JS等等。而這里的代碼足以重新這個(gè)BUG了，首先我在我做習(xí)慣使用的Chrome看效果。

在Chrome下完美無缺，實(shí)現(xiàn)了我們的需求，我們要顯示出來的.top .post完美顯示，也許在這個(gè)時(shí)候可能粗心大意的朋友就開始慶功了。不過為后面的缺陷埋下了伏筆，結(jié)果被測(cè)試的童鞋一看就會(huì)發(fā)現(xiàn)問題了。
于是就有了IE7跟z-index的狗血?jiǎng)∏椋划?dāng)然前端er都比較討厭IE7及以下版本的IE瀏覽器，但是沒辦法，說叫人家這么牛逼了，咱得從。不然不管是誰的問題，最終都會(huì)說是你的問題?？纯碔E7下的結(jié)果吧。

既然有問題了，那么就得解決嘛。其實(shí)針對(duì)這個(gè)問題網(wǎng)上有大量類似情況的解決方案，但現(xiàn)在回頭看這些，似乎說得非常不清楚，當(dāng)然我們這里接下來說的也可能不是太清楚，但至少比我所看到的那些，是清楚的。網(wǎng)上已經(jīng)有的解決方法的中心思想就是：

這是IE7渲染DOM的問題，我們把父層的容器用position定位的時(shí)候（position:relative;），子層的z-index不管設(shè)置多高數(shù)值都會(huì)被重置。既然問題找到了，我們也就知道解決的方法了，只要把父層加上z-index值就好了。

這句話其實(shí)特別好理解，也是正確的解決方式，但不夠詳細(xì)，比如有的小白可能就會(huì)認(rèn)為我上面的這個(gè)代碼就是符合這個(gè)思路的（.top .post的父級(jí).top .t不就是設(shè)置了一個(gè)z-index么？），但為什么還是不行呢？仔細(xì)的童鞋就會(huì)看到再往上還有個(gè).top也有一個(gè)position:relative（這是為實(shí)現(xiàn)需求的一種需要才這樣寫的）。關(guān)于這個(gè)問題，其實(shí)用google搜索就會(huì)發(fā)現(xiàn)很多真正去分析這個(gè)問題的文章，比如http://w3help.org/zh-cn/causes/RM8015，而至于百度就得了吧，很多都是復(fù)制過來沒經(jīng)過自己大腦的。而如果直接為解決問題而解決問題的話，實(shí)際上這個(gè)地方只需要加一個(gè)z-index就可以了。

.top{ height:100px; width:400px; margin:0 auto; background:#f00; position:relative;z-index:10;}

而網(wǎng)上復(fù)制過來的答案說父級(jí)的一定要大于這個(gè)元素，同時(shí)要大于下面其他元素的z-index，但實(shí)際上是有了上面的這個(gè)就已經(jīng)讓IE7顯示這樣的結(jié)果了。這又是為什么呢？因?yàn)殡m然.bot .post的是z-index:99,但是.bot沒有設(shè)置值，這個(gè)時(shí)候.top中的元素是跟.bot比較的，當(dāng)然如果里面的元素會(huì)與.bot .post爭(zhēng)風(fēng)吃醋那么就必須設(shè)置值大于99,如：

<div style=” position:relative;”>
<div class=”top”>…</div>
<div class=”bot”>…</div>
</div>

同時(shí)我們還可以繼續(xù)增加一下。也就是在.top上面再套一個(gè)元素，而且設(shè)置這個(gè)元素為position:relative，我們會(huì)發(fā)現(xiàn)，如果這個(gè)元素沒有設(shè)置z-index，這個(gè)bug依然會(huì)出現(xiàn)（當(dāng)然.bot沒有包含在這個(gè)元素中的時(shí)候）。
那么總結(jié)起來就是：

1. 這是IE7及相關(guān)瀏覽器處理的一個(gè)”缺陷”，造成這種現(xiàn)象的產(chǎn)生。

2. 需要在異常元素的所有父級(jí)如果設(shè)置了position:relative，則需要設(shè)置z-index(一直到讓這個(gè)元素產(chǎn)生問題的那個(gè)元素不屬與那個(gè)父級(jí)的子元素的時(shí)候，比如如果后面我們說的.top上面再套一個(gè)元素包含了.bot，那么我們?cè)O(shè)置了，異常還是不會(huì)發(fā)生的。)

3. 如果影響了異常元素的元素設(shè)置了比較高的z-index值，那么異常元素及其父級(jí)的z-index必須大于(不能是等于)這個(gè)值。