CSS Z-index屬性決定了一個(gè)HTML元素的層疊級(jí)別。元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。

多數(shù)的CSS屬性都很容易使用。常常，當(dāng)您對(duì)標(biāo)記語言的元素使用CSS屬性時(shí)，產(chǎn)生的結(jié)果會(huì)隨著您刷新頁面而立即呈現(xiàn)。而另一些CSS屬性，卻會(huì)有一些復(fù)雜，且只能在給定的環(huán)境下才會(huì)工作。

Z-index屬性便屬于上面所說的后面的那一組。Z-index無疑的比其他任何屬性都會(huì)頻繁的導(dǎo)致（兼容性）上的混亂和（開發(fā)者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會(huì)發(fā)現(xiàn)它卻是一個(gè)非常容易使用的屬性，并且會(huì)為解決很多l(xiāng)ayout方面的挑戰(zhàn)提供強(qiáng)有力的幫助。

在這篇文章里，我們會(huì)準(zhǔn)確的說明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，那些存在于已有版本的IE及Firefox瀏覽器中的獨(dú)特問題。這篇關(guān)于Z-index屬性的全透視文章將會(huì)為那些有著良好基礎(chǔ)的開發(fā)者在使用Z-index屬性時(shí)提供強(qiáng)大的自信心及強(qiáng)有力的幫助。

自然的層疊順序

在一個(gè)HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking context，暫時(shí)未找到合適的漢語翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的。這個(gè)列表中的項(xiàng)都沒有被賦予Z-index屬性。

元素的背景和邊框會(huì)創(chuàng)建一個(gè)stacking context

Z-index 屬性，當(dāng)被正確使用的時(shí)候，會(huì)改變自然的層疊順序。