z-index兼容問題:關于ie6/7下的z-index

2024-07-11 09:01:41

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：這里要討論的是最近在項目上對z-index在ie6下自己的一個認識，希望能幫助在z-index兼容上遇到問題的同行一個參考。

z-index這個屬性其實在挺多地方都會用到，在百度上搜索也有大量關于z-index的篇幅去闡述這個屬性，特別是在ie6下的z-index處理有更多的相關文章，本文就不再圍繞z-index這一屬性的基礎展開敘述。這里要討論的是最近在項目上對z-index在ie6下自己的一個認識，希望能幫助在z-index兼容上遇到問題的同行一個參考。

首先是demo，點擊就可以看到相關的demo了，這個demo就是一個分類導航的模塊，實現的功能是鼠標經過時當前標簽切換背景以及彈出相關層，代碼的結構好壞不做進一步探討。我們繼續來看z-index這個東西。

首先我是這樣處理，所有a標簽z-index都為10，經過彈出層z-index為20,當前a標簽z-index為30,這樣在chrome、firefox、ie9/8都達到了預期的效果（設置z-index的過程當然要順便設置position這個東西，如果你有先看過網上的文章也會知道。）

在首次完成后ie6/7并不兼容，也就是你現在所看到的demo（你可以放到ie6/7里看看），經過彈出層被其他a標簽遮住了。按照平時的慣例依照直覺z-index:9999；position:relative;zoom:1各種各樣的屬性都用上了，這個層還是死死的躺在其他a標簽下面。
沒辦法，看來亂碰撞不能解決問題，只能用理性去剝開ie6下z-index的沉淪原因。據我所知（不知道什么時候記住的）ie6下的z-index比較是看他們的老大（父級）的比拼，也就是說誰的老大高級（z-index），往往它們也就跟著上位了。

按著剛才描述的邏輯去思考這個demo在ie6/7下的問題，目前所有a標簽都是同級（z-index:10；），也就是說所有堂口的老大都是10級的，他們的小弟肯定不會大過他們，這樣想來難怪經過彈出層在其他a下面了，鑒于這種情況，我只能把當前a標簽的老大li再提高一個級別，使鼠標經過的當前a標簽以及彈出層整體提高一個檔次，這樣就不會給其他a標簽遮住了。

關于ie6/7下的z-index說到底其實就是拼爹，誰的爹大誰就在上面（大部分如此，不排除其他情況）。如果你沒有得到答案我會在收到一條評論后公開～最后再補充一句，尼瑪的ie6！！

上一篇：div和css網頁制作:初學者使用div和css誤區

下一篇：網頁制作技巧:清除浮動和圖片水平垂直居中