|
翻譯來源：堂主的博客
非常好的一篇技術(shù)文檔，翻譯自Louis Lazaris 2009年9月15日發(fā)表的《The Z-Index CSS Property: A Comprehensive Look》 ，相信會幫助很多像我一樣的前端狂！
原作者保留所有版權(quán)。
EN文不好，歡迎各路牛頭斧正。
------------------------------------------------
大多數(shù)的CSS屬性都很容易使用。常常，當(dāng)您對標(biāo)記語言的元素使用CSS屬性時，產(chǎn)生的結(jié)果會隨著您刷新頁面而立即呈現(xiàn)。而另一些CSS屬性，卻會有一些復(fù)雜，且只能在給定的環(huán)境下才會工作。
Z-index屬性便屬于上面所說的后面的那一組。Z-index無疑的比其他任何屬性都會頻繁的導(dǎo)致（兼容性）上的混亂和（開發(fā)者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會發(fā)現(xiàn)它卻是一個非常容易使用的屬性，并且會為解決很多l(xiāng)ayout方面的挑戰(zhàn)提供強有力的幫助。
在這篇文章里，我們會準(zhǔn)確的說明究竟什么是Z-index，它為什么會這么不為人所了解，并一起討論一些關(guān)于它的實際使用中的問題。我們同時會描述一些會遇到的瀏覽器間的差異，那些存在于已有版本的IE及Firefox瀏覽器中的獨特問題。這篇關(guān)于Z-index屬性的全透視文章將會為那些有著良好基礎(chǔ)的開發(fā)者在使用Z-index屬性時提供強大的自信心及強有力的幫助。
這是什么？
Z-index屬性決定了一個HTML元素的層疊級別。元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現(xiàn)。
為了更清晰的描述Z-index是如何工作的，上面的這張圖片夸大展示了層疊元素在視覺位置上的關(guān)系。
自然的層疊順序
在一個HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個列表，它展示的列表項是處于一個層疊環(huán)境（stacking context，暫時未找到合適的漢語翻譯，應(yīng)該是指層疊的元素所處的那個層疊的環(huán)境）中，這些項是處于這個層疊環(huán)境的底部的。這個列表中的項都沒有被賦予Z-index屬性。
元素的背景和邊框會創(chuàng)建一個stacking context
引用:
·具有負(fù)值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級越靠上）
·沒有被定位，沒有浮動的塊級元素，按照出現(xiàn)的先后順序排列
·沒有被定位，浮動的元素，按照出現(xiàn)的先后順序排列
·內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列
·被定位的元素，按照出現(xiàn)的先后順序排列
Z-index 屬性，當(dāng)被正確使用的時候，會改變自然的層疊順序。
當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會特別的明顯。下面的，負(fù)邊距的BOX被拿來展示，用以說明自然的層疊順序。
上面的BOX被定義了不同的背景和邊框色，并且后兩個是交錯的并且定義了負(fù)值的頂部邊距，所以我們可以看到自然的層疊順序�；疑腂OX在標(biāo)記中位于第一位，藍(lán)色的BOX位于第二位，金色的排在第三。應(yīng)用的負(fù)邊距明確的表明這個事實：這些元素未被設(shè)置Z-index 屬性；它們的層疊順序是自然的，或者是默認(rèn)的，復(fù)合規(guī)則的。產(chǎn)生交錯的現(xiàn)象都是因為負(fù)值的邊距。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 全透視:CSS Z-index 屬性 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 全透視:CSS Z-index 屬性 [1]
第 2 頁 
