到新地方有些日子了，差不多適應了這邊的工作節奏與流程。接到的第一個開發任務是幾個比較簡單的頁面，需要做的工作就是先把設計圖變成頁面，然后使用PHP創建幾個請求的接口傳遞數據，標準且簡潔的web開發思路。可是真有些日子沒有寫DIV+CSS了，而且對IE6兼容性的坑碰到的還是不夠多(以前做國外項目)，所以這次開發中不可避免的碰見了幾個問題，尤其是在IE下的 z-index 問題很有意思，所以整理了一些資料和總結分享給大家...注：因為引入了jsfiddle，所以頁面加載受影響會稍慢一些^_^

閱讀目錄：

z-index屬性
z-index規范參考
在IE下出現的問題
在IE6下z-index的問題
>拼爹的時代
>萬惡的float 
IE6下 select z-index無效而遮擋div
>用 iframe 包裹 select 元素
>以 Iframe 作為div的子元素，覆蓋 select 元素
本文結語 

z-index屬性

z-index : auto | numberz-index 屬性設置元素的堆疊順序，如果為正數，則離用戶更近，為負數則表示離用戶更遠；擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面；z-index 僅能在定位元素上奏效（position 屬性值為 relative 或 absolute 或 fixed的對象）。

z-index規范參考

在IE下出現的問題

當定位元素的 'z-index' 未設置時（默認為 auto），在 IE6 IE7 IE8(Q) 下將會創建一個新的局部層疊上下文。而在其它瀏覽器下，則嚴格按照規范，不產生新的局部層疊上下文。

這個問題將導致定位元素的層疊關系在不同瀏覽器出現很大的區別，嚴重的可導致頁面布局混亂、內容覆蓋等。

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

直接從w3help復制了代碼，分析以下代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表