z-index屬性在IE7和IE6的相容問題:採用定位的元素有可能就會用到z-index屬性，不過具有一定的瀏覽器相容問題，不用問基本屬於IE低版本瀏覽器的問題，因為它的前科實在太多了，雖然現在用低版本瀏覽器的用戶越來越少，相信不出幾年就會消失，但是畢竟現在還是存在的，下麵就介紹一下如何解決z-in...
z-index屬性在IE7和IE6的相容問題:
採用定位的元素有可能就會用到z-index屬性，不過具有一定的瀏覽器相容問題，不用問基本屬於IE低版本瀏覽器的問題，因為它的前科實在太多了，雖然現在用低版本瀏覽器的用戶越來越少，相信不出幾年就會消失，但是畢竟現在還是存在的，下麵就介紹一下如何解決z-index屬性在IE7和IE6瀏覽器的相容問題。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #a{position:relative;} #a-1 { position:absolute; z-index:100; width:100px; height:100px; background:red; } #b{position:relative;} #b-1 { position:absolute; z-index:10; width:40px; height:40px; background:black; } </style> </head> <body> <div id="a"> <div id="a-1"></div> </div> <div id="b"> <div id="b-1"></div> </div> </body> </html>
特別說明:以上代碼最好複製黏貼到本地進行測試，否則可能無法正確顯示效果。
代碼在標準瀏覽器或者IE8和IE8以上瀏覽器運行的時候，紅色的能夠覆蓋黑色的，但是在IE7和IE7以下瀏覽器中則不能，下麵介紹一下如何解決此問題，a和b元素都添加z-index屬性即可實現正確顯示效果，這是因為在標準瀏覽器或者IE8和IE8以上瀏覽器中，如果定位元素沒有設置z-index屬性值，那麼此值預設為auto，而在IE7和IE6中，此值為0，根據相關z-index層級樹等相關原則就會導致此現象，具體可以參閱CSS的z-index屬性用法詳解和z-index在IE6和IE7的相容性問題一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11598
更多內容可以參閱:http://www.softwhy.com/divcss/
