最近幾天在做一個網(wǎng)站建設(shè)項目，我負責(zé)的一個前端模塊，主要是多級菜單的，其實就用到了position:relative;和position:absolute;結(jié)果就出現(xiàn)了一個常見的IE7及一下瀏覽器的bug，而chrome、火狐、IE7+都沒有出現(xiàn)這樣的問題。那么是什么問題呢？就是因為為了對元素進行絕對定位并讓它優(yōu)先顯示，但在IE7下無效。先來看拆分的代碼（以下代碼實際上不是項目模塊本身的代碼，而是為了在這里重現(xiàn)這個現(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àn)問題模塊的一個簡化版HTML+CSS，當(dāng)然實際上項目中比這里要復(fù)雜多，包含還有JS等等。而這里的代碼足以重新這個BUG了，首先我在我做習(xí)慣使用的Chrome看效果。

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

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

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

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

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

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

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

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

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

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

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