到新地方有些日子了，差不多適應(yīng)了這邊的工作節(jié)奏與流程。接到的第一個(gè)開發(fā)任務(wù)是幾個(gè)比較簡單的頁面，需要做的工作就是先把設(shè)計(jì)圖變成頁面，然后使用PHP創(chuàng)建幾個(gè)請(qǐng)求的接口傳遞數(shù)據(jù)，標(biāo)準(zhǔn)且簡潔的web開發(fā)思路。可是真有些日子沒有寫DIV+CSS了，而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國外項(xiàng)目)，所以這次開發(fā)中不可避免的碰見了幾個(gè)問題，尤其是在IE下的 z-index 問題很有意思，所以整理了一些資料和總結(jié)分享給大家...注：因?yàn)橐肓薺sfiddle，所以頁面加載受影響會(huì)稍慢一些^_^　　

　　閱讀目錄：

1. z-index屬性
2. z-index規(guī)范參考
3. 在IE下出現(xiàn)的問題
4. 在IE6下z-index的問題
   1. >拼爹的時(shí)代
   2. >萬惡的float 
5. IE6下 select z-index無效而遮擋div
   1. >用 iframe 包裹 select 元素
   2. >以 Iframe 作為div的子元素，覆蓋 select 元素
6. 本文結(jié)語
7. 參考資料

　　z-index屬性　　

1. z-index : auto | number
2. z-index 屬性設(shè)置元素的堆疊順序，如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)；
3. 擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面；
4. z-index 僅能在定位元素上奏效（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象）。

　　z-index規(guī)范參考　　

　　在IE下出現(xiàn)的問題　　

　　當(dāng)定位元素的 'z-index' 未設(shè)置時(shí)（默認(rèn)為 auto），在 IE6 IE7 IE8(Q) 下將會(huì)創(chuàng)建一個(gè)新的局部層疊上下文。而在其它瀏覽器下，則嚴(yán)格按照規(guī)范，不產(chǎn)生新的局部層疊上下文。

　　這個(gè)問題將導(dǎo)致定位元素的層疊關(guān)系在不同瀏覽器出現(xiàn)很大的區(qū)別，嚴(yán)重的可導(dǎo)致頁面布局混亂、內(nèi)容覆蓋等。

　　受影響的瀏覽器有IE6 IE7 IE8(Quriks Mode)

　　直接從w3help復(fù)制了代碼，分析以下代碼：

<style type="text/css">
  body { margin:0; }
  .p1{ top:20px; height:50px; width:150px; background-color:blue;}
  .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
  .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>

<div style="position:relative;" class="p1">1
    <div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>

　　注：Q代表Quriks Mode，即混雜模式。

　　根據(jù) W3C CSS2.1 規(guī)范中的說明，定位元素【p1】和【p3】由于未設(shè)置 'z-index' 特性（使用默認(rèn)值 auto），它們不會(huì)創(chuàng)建新的局部層疊上下文，而定位元素【p2】設(shè)置了 z-index:1 則會(huì)創(chuàng)建新的層疊上下文。

　　另，在同一根層疊上下文中，同為 z-index:auto 的定位元素【p1】和【p3】，它們的層疊級(jí)別相同，但【p3】在【p1】之后，所以在 Z 軸上【p3】比【p1】靠前顯示，又，【p2】層疊上下文的層疊級(jí)別為正數(shù)，所以【p2】的層疊級(jí)別要比【p3】高。因此，它們?cè)?Z 軸上的順序?yàn)椋海ㄗ裱?back-to-font）【p1】 -> 【p3】 -> 【p2】

　　以上為標(biāo)準(zhǔn)瀏覽器下的情況。

　　而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都創(chuàng)建了新的局部層疊上下文，在同一根層疊上下文中，它們的層疊級(jí)別相同，但【p3】在【p1】之后，所以在 Z 軸上【p3】比【p1】靠前顯示。此時(shí)，由于【p2】處于【p1】的層疊上下文中，所以【p2】在 Z 軸上要比【p3】靠后。

　　在來一個(gè)例子：

<style>
  .parent{width:200px; height:200px; padding:10px;}
  .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
  .lt50{left:50px;top:50px;}
</style>

<div style="position:absolute; background:lightgrey;" class="parent">
    <div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>
    <div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>
</div>
<div style="position:absolute;left:80px;top:80px;background:black;" class="parent">
    <div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>
    <div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>
</div>

　　解決辦法　　

　　理解層疊上下文、層疊級(jí)別與 'z-index' 之間的關(guān)系。在可能出現(xiàn)定位元素相互覆蓋的情況時(shí)，明確指定定位元素的 'z-index' 特性，避免此問題的出現(xiàn)。

　　注：此段內(nèi)容基本都是來自w3help。

　　在IE6下z-index的問題

　　我不是一個(gè)喜歡抱怨的人，so...有關(guān)抱怨IE6的話在此省略500字...

　　先上個(gè)圖說說我在工作中實(shí)際遇到的問題：

　　圖片的上半部分就是在非IE6下的交互，圖片下半部分是在IE6下的顯示效果，當(dāng)打開虛擬機(jī)測試的時(shí)候我表示瞬間碉堡了，囧...在IE6下這個(gè)tips被蓋住了，很明顯這個(gè)不是我想要的效果，可是為什么會(huì)出現(xiàn)這個(gè)情況類？接著往下看。

　　分析此類問題的原因：　　

　　1.這是個(gè)拼爹的時(shí)代，在IE6下很好的體現(xiàn)了這點(diǎn)...囧

　　按照正常的思維，z-index層級(jí)越高，內(nèi)容越應(yīng)該在上面顯示，在大部分的瀏覽器在大部分的情況下，確實(shí)如此，但是不絕對(duì)。尤其遇到IE6。

　　在IE6下的層級(jí)高低不僅要看本身，還要看自己的父元素是否給力：父元素的 position 屬性為 relative或absolute 時(shí)，子元素的 absolute 屬性是相對(duì)于父元素而言的。而在IE6下的層級(jí)的表現(xiàn)有時(shí)候不是看子元素的 z-index 多高，而要看它們的父元素的 z-index 誰高誰低。點(diǎn)擊 Result 可以看到HTML對(duì)應(yīng)的VIEW。

　　從以上的代碼中可以看到最內(nèi)層<div>的z-index屬性為999，其父元素的z-index屬性為100。按照正常的顯示邏輯，圖片應(yīng)該正常顯示且不會(huì)被背景色所影響，可是在IE6下會(huì)有問題，直接上圖片會(huì)比較直觀，比較看看IE6下和非IE6瀏覽器的顯示效果。chrome、FF和opera都經(jīng)過測試了，為了不使圖片過多我就拿個(gè)chrome的截圖吧。

　　重現(xiàn)這個(gè)bug的條件很簡單，只要絕對(duì)定位（position:absolute）<div>的祖先元素，或者說是最頂級(jí)的祖先元素的 relative 屬性小于黑色半透明層的z-index層級(jí)即可。解決辦法也很簡單，只需要給的祖先元素加上z-index就可以。

　　為具有 relative 屬性的頂級(jí)祖先元素打了雞血(加了z-index)后，IE6下終于正常顯示了。這個(gè)問題很現(xiàn)實(shí)的教育了我們 - 在拼爹拼不過的條件下我們只能靠自己努力...

　　IE6下拼爹的問題也就是我在實(shí)際開發(fā)中碰到的問題，現(xiàn)在已經(jīng)完美解決且達(dá)到需求的效果了。接下來要介紹的是一些我總結(jié)的資料，都是介紹在IE環(huán)境下得各種z-index的坑。

 　　2.萬惡的float

　　float 是 css 的定位屬性，而且應(yīng)該是CSS中最常用的屬性之一了，至于為什么說它萬惡等我改天去準(zhǔn)備一篇文章單獨(dú)進(jìn)行解說，在這里借著以前的學(xué)習(xí)筆記簡單說幾點(diǎn)：

　　1. IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉；

　　2. 3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周圍有一個(gè)奇怪的力場一樣；

　　3. 雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距。

　　有關(guān)float的掃盲就先到這里，還有一點(diǎn)就是float畢竟是標(biāo)準(zhǔn)的屬性，而且大多數(shù)的前端都習(xí)慣用它去實(shí)現(xiàn)頁面，所以我的建議就是：深入理解 HTML語義和表現(xiàn)。

　　接著開始講述 z-index和float 在IE6環(huán)境下擦出的坑爹的火花...先上一段代碼：

　　<div style="background:#000;width:100%;height:600px;opacity:0.3; filter:alpha(opacity=30);position:absolute;left:0;top:0;z-index:1;overflow:hidden;"></div>
　　<div style="position:relative;z-index:100;">
　　　　<img src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_1.jpg" style="float:left;" width="300" />
　　</div>

　　看到<img>有設(shè)置float屬性，上面這段代碼顯示的效果與IE6下拼爹失敗一樣，IE6下的犀牛書是灰色的 T.T 。為了讓犀牛書正常顯示，只需要把<img>的float屬性去掉即可。

　　個(gè)人理解可能是因?yàn)?lt;img>的float使得z-index失效造成的。網(wǎng)上還有種說法是因?yàn)閒loat和relative兩者在定位上問題，所以一起使用的時(shí)候會(huì)造成此bug。

　　這個(gè)問題又教育了我們 - 某些環(huán)境(IE6)下也要小心被兄弟坑...

　　IE6下 select z-index無效而遮擋div

　　這個(gè)問題其實(shí)在是比較常見的了，我早期做項(xiàng)目的時(shí)候有幸遇見過這個(gè)問題，所以有現(xiàn)成的資料，趁著這次也剛好整理整理、回憶回憶。兩個(gè)解決辦法都是圍繞iframe展開的，咱們先來看第一個(gè)。

　　1.用 iframe 包裹 select 元素

　　使用iframe包住select，這樣iframe可以有z-index，只要在div上設(shè)置的z-index比iframe的高即可實(shí)現(xiàn)。示例代碼如下： 

　　<iframe style="z-index:1;position: absolute; ">
　　　　<select name="me">                    
　　　　　　<option value="name">Darren聶微東</option>     
　　　　　　<option value="sex">male</option>     
　　　　　　<option value="age">secret</option>     
　　　　</select>     
　　</iframe>

　　2.以 Iframe 作為div的子元素，覆蓋 select 元素(推薦使用)
　　建立一個(gè)跟div同寬同高的iframe，并且z-index比div要低。

<style type="text/css">
#iframe{   
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:-1;
}   
.text_div{   
    position: absolute;   
    left:100px;   
    top:50px;   
    width: 300px;   
    height: 200px;   
    background : blue;     
    z-index:100;   
}   
</style>
<div class="text_div">  
     <span>這里可以包含其他dom元素</span>  
     <iframe id="iframe"></iframe>  
</div>

　　注:在這里如果不加src屬性,盡管iframe會(huì)把select擋住,但是由于默認(rèn)iframe為白色,會(huì)影響原來的div背景色。解決方法可以加了一個(gè)空的HTML文件，并把body 的值設(shè)為和原來div背景色一致,這樣就解決了默認(rèn)白色背景色的問題，這里只是一種思路，辦法總比困難多 ^_^。

　　本文結(jié)語

　　與很多做國內(nèi)項(xiàng)目的前端一樣，我也會(huì)常常忍不住詛咒IE，可是假如換個(gè)思考方式我們也得感謝它，工作因?yàn)樗庞辛烁嗵魬?zhàn)和成就感。

　　對(duì)不理解CSS層疊朋友來說 z-index 確實(shí)是一個(gè)大坑，希望這篇文章能夠給那些掉到坑內(nèi)的朋友一些幫助。

　　如果覺得此文還算用心，請(qǐng)勞駕點(diǎn)擊右下角的推薦，謝謝^.^

　　參考資料：

• http://www.w3.org/TR/CSS21/visuren.html#z-index
• http://www.zhangxinxu.com/wordpress/?p=471
• http://www.w3school.com.cn/css/pr_pos_z-index.asp
• http://w3help.org/zh-cn/causes/RM8015