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

補(bǔ)充于2016-01-03
本文內(nèi)容僅屬于z-index表現(xiàn)層一些皮毛內(nèi)容，不過(guò)一些經(jīng)驗(yàn)觀點(diǎn)還是很有指導(dǎo)意義的。

一、海邊拾貝

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

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

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

二、世界上本沒(méi)有z-index

要有這樣子的意識(shí)：absolute是一個(gè)能夠獨(dú)當(dāng)一面的屬性，其使用可以不要relative，當(dāng)然，也可以不使用z-index。在默認(rèn)情況下，元素應(yīng)用了非static的position屬性后，其就會(huì)有一個(gè)隱晦的層級(jí)，會(huì)居于普通元素之上，無(wú)需額外設(shè)置z-index屬性值。

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

不妨看幾個(gè)站點(diǎn)，做個(gè)點(diǎn)評(píng)。例如好久沒(méi)有拿來(lái)說(shuō)事的新浪微博，我們可以看看其頭部的z-index的是如何的混亂如麻：

然后浮動(dòng)框插件還有個(gè)大大的z-index值（firebug顯示z-index:850）。于是，一場(chǎng)恩怨情仇，復(fù)雜糾葛的古裝穿越劇開(kāi)演了……

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

position屬性中的“后來(lái)居上”這個(gè)顯示規(guī)則是沒(méi)有兼容性問(wèn)題的，所以，要想一個(gè)元素上面顯示，直接放后面就可以了，無(wú)需z-index。

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

三、z-index的1, 2, 3規(guī)則

有時(shí)候，面對(duì)復(fù)雜的交互，我們還是需要z-index值的，此時(shí)，如何避免z-index層級(jí)的混亂呢？

我是如何處理的：

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

2. 應(yīng)用1,2,3規(guī)則。地面派元素的z-index沒(méi)有，或?yàn)?code>1，或是2，或是3。根據(jù)我的經(jīng)驗(yàn)，“地面派元素”，很少需要使用z-index為2，至于z-index:3我記憶中還沒(méi)有碰到過(guò)，因?yàn)橐粋€(gè)頁(yè)面交互再怎么復(fù)雜，也不可能正好是前面一個(gè)元素比后面元素層級(jí)高，而且有3~4個(gè)元素。也就是說(shuō)，對(duì)于“地面”元素，我們只要使用[null, 1, 2, 3]之間的層級(jí)就能應(yīng)付所有的情況。于是乎，我們想要出線層級(jí)混亂的情況都比較難了。

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

四、遺漏的position:fixed

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

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

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1855

（本篇完）

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。