byzhangxinxufromhttp://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1855

補充于2016-01-03
本文內容僅屬于z-index表現層一些皮毛內容，不過一些經驗觀點還是很有指導意義的。

一、海邊拾貝

z-index屬性目前只有在position:relative、position:absolute和position:fixed參與的情況下才有作用，表示層級，類似photoshop中層級的概念。

關于z-index的一些基本概念，在09年的“IE6下z-index犯癲不起作用bug的初步研究”一文中有所提及，下圖為當時自己繪制的一張業余圖片。

眾所周知的一些東西，不啰嗦了。

二、世界上本沒有z-index

要有這樣子的意識：absolute是一個能夠獨當一面的屬性，其使用可以不要relative，當然，也可以不使用z-index。在默認情況下，元素應用了非static的position屬性后，其就會有一個隱晦的層級，會居于普通元素之上，無需額外設置z-index屬性值。

然而，眼觀現實世界，z-index屬性值的濫用跟absolute屬性值的濫用有的一拼——只要用到絕對定位/相對定位的地方就要設置一個z-index值，以表示自己的地位。結果，N多個z-index之后，網站前端換人之后，頁面的z-index層級混亂了，為了讓新添加元素上面顯示，不惜設置z-index的值為999或是9999等。這就好比球隊，人人都想當老大，最后結果是個很有味道的屎。

不妨看幾個站點，做個點評。例如好久沒有拿來說事的新浪微博，我們可以看看其頭部的z-index的是如何的混亂如麻：

然后浮動框插件還有個大大的z-index值（firebug顯示z-index:850）。于是，一場恩怨情仇，復雜糾葛的古裝穿越劇開演了……

對于這些在“地面”上干活的元素，首先盡量避免絕對定位，就算使用了絕對定位，至少50%的z-index值都是沒有必要的，直接可以塞進ToTo馬桶里沖掉的。不信，你把這些z-index值都刪掉試試，有一半都是無傷大雅的。

position屬性中的“后來居上”這個顯示規則是沒有兼容性問題的，所以，要想一個元素上面顯示，直接放后面就可以了，無需z-index。

泛濫的z-index既浪費代碼，又不利于后期維護和他人接受，為何不扔掉呢。記住，這個世界上本沒有z-index。

三、z-index的1, 2, 3規則

有時候，面對復雜的交互，我們還是需要z-index值的，此時，如何避免z-index層級的混亂呢？

我是如何處理的：

1. 歸門別類。將z-index分為兩派，分為“地面派”和“天空派”。“天空派”就是指遮罩彈框，類似boxy這種，或是其他一些交互組件等；其余的就算是“地面派”了。

2. 應用1,2,3規則。地面派元素的z-index沒有，或為1，或是2，或是3。根據我的經驗，“地面派元素”，很少需要使用z-index為2，至于z-index:3我記憶中還沒有碰到過，因為一個頁面交互再怎么復雜，也不可能正好是前面一個元素比后面元素層級高，而且有3~4個元素。也就是說，對于“地面”元素，我們只要使用[null, 1, 2, 3]之間的層級就能應付所有的情況。于是乎，我們想要出線層級混亂的情況都比較難了。

都是聰明人，都懂的，就不啰嗦了。

四、遺漏的position:fixed

本系列并沒有將position:fixed放在其中，主要是這個屬性比較的安分守已，沒有什么噱頭可講。

至此，本系列告一段落。前后差不多有1年的時間跨度，比哈利波特的周期要短多了。……不管怎樣，阿里嘎多。

原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1855

（本篇完）

總結

以上是生活随笔為你收集整理的CSS相对定位|绝对定位(五)之z-index篇——张鑫旭的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。