Css中Z-index屬性詳解

提及 Z-index 屬性它只能在給定的環境下才工做。 Z-index屬性 也確定的比其餘任何屬性都會頻繁的致使（兼容性）上的混亂，一旦你真正理解了 Z-index屬性 ，你會發現它倒是一個很是方便且容易使用的屬性。

 

Z-index屬性決定了一個HTML元素的層疊級別。元素層疊級別是相對於元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味着這個元素在疊層順序中會更靠近頂部。這個層疊順序沿着垂直的線軸被呈現。以下圖，更能清楚的代表意思。

 

下面先來看一下z-index屬性的值：

 

z-index:auto | number

auto: 默認值

number: 無單位的整數值，可爲負數。

z-index 值較大的元素將疊加在 z-index 值較小的元素之上，對未指定此屬性的定位對像， z-index 值爲正數的對象會在其之上，而 z-index 值爲負數的地像在其之下。

 

下面來說講：

定位元素間的Z值比較及z-index在不一樣瀏覽器下默認值的影響

在ie下默認值(缺省)爲：z-index:0; 而FF下則缺省爲：z-index:auto;

 

1. z-index正是IE/FF下這一點區別致使ie,ff下z值的不一樣表現。  

2. 正常狀況下：兄弟（同級）元素後者居上，父子之間子高於父。  

3. 對於定位元素，（不論IE仍是FF）非同級關係和非父子關係元素之間的Z值大小比較，需要回溯至其爲兄弟關係的兩個祖先元素上，先比較這兩個元素的z- index值，只有當「兄」的z-index大於「弟」的z-index值，「兄」的各個後代元素，才能超過「弟元素」及其子孫元素。

4. 對於IE,元素的z-index缺省值是0，若是不另外設置「兄」，「弟」元素的z-index值，那麼」兄」的z-index就沒法大於「弟」的z- index。那麼」兄」元素及其子孫就沒法蓋過」弟」元素及其子孫。而一旦「兄」的z-index大過了」弟」元素的z-index,那麼狀況就翻轉了，「弟」元素及其子孫將沒法蓋過「兄」元素及其子孫。
而對FF,元素的z-index缺省值是auto,auto的意思是什麼，就是說「隨便，不關我事」，那麼子孫們的z值等級就只跟他們本身自己的z-index有關了。

 

實例分析請到OECP社區http://www.oecp.cn/hi/listly/blog/456下載。