關於JS中的z-index

CSS教程：完全掌握Z-index屬性

大多數的CSS屬性都很容易使用。經常，當您對標記語言的元素使用CSS屬性時，產生的結果會隨着您刷新頁面而當即呈現。而另外一些CSS屬性，卻會有一些複雜，且只能在給定的環境下才會工做。

Z-index屬性便屬於上面所說的後面的那一組。Z-index無疑的比其餘任何屬性都會頻繁的致使（兼容性）上的混亂和（開發者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會發現它倒是一個很是容易使用的屬性，而且會爲解決不少layout方面的挑戰提供強有力的幫助。

在這篇文章裏，咱們會準確的說明究竟什麼是Z-index，它爲何會這麼不爲人所瞭解，並一塊兒討論一些關於它的實際使用中的問題。咱們同時會描述一些會遇到的瀏覽器間的差別，那些存在於已有版本的IE及Firefox瀏覽器中的獨特問題。這篇關於Z-index屬性的全透視文章將會爲那些有着良好基礎的開發者在使用Z-index屬性時提供強大的自信心及強有力的幫助。

這是什麼？

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

爲了更清晰的描述Z-index是如何工做的，上面的這張圖片誇大展現了層疊元素在視覺位置上的關係。

天然的層疊順序
在一個HTML頁面中，天然的層疊順序（也就是元素在Z軸上的順序）是由不少因素決定的。下面的是一個列表，它展現的列表項是處於一個層疊環境（stacking context，暫時未找到合適的漢語翻譯，應該是指層疊的元素所處的那個層疊的環境）中，這些項是處於這個層疊環境的底部的。這個列表中的項都沒有被賦予Z-index屬性。
元素的背景和邊框會建立一個stacking context
引用:
·具備負值的stacking contexts元素，按照出現的前後順序排列（越靠後層級越靠上） 
·沒有被定位，沒有浮動的塊級元素，按照出現的前後順序排列 
·沒有被定位，浮動的元素，按照出現的前後順序排列 
·內聯元素，按照出現的前後順序排列排列 
·被定位的元素，按照出現的前後順序排列
Z-index 屬性，當被正確使用的時候，會改變天然的層疊順序。
固然，除非元素已經被定位按照互相交疊的形式展示，不然元素的層疊順序並不會特別的明顯。下面的，負邊距的BOX被拿來展現，用以說明天然的層疊順序。

上面的BOX被定義了不一樣的背景和邊框色，而且後兩個是交錯的而且定義了負值的頂部邊距，因此咱們能夠看到天然的層疊順序。灰色的BOX在標記中位於第一位，藍色的BOX位於第二位，金色的排在第三。應用的負邊距明確的代表這個事實：這些元素未被設置Z-index 屬性；它們的層疊順序是天然的，或者是默認的，複合規則的。產生交錯的現象都是由於負值的邊距。
 
爲何它會產生混亂？
即便Z-index並非一個難以理解的屬性，但它卻會因錯誤的假設而使不少初級的開發人員陷入混亂。混亂髮生的緣由是由於Z-index只能工做在被明肯定義了absolute，fixed或relative 這三個定位屬性的元素中。
爲了證實Z-index只能工做於被定位了的元素中，這裏有一樣的三個BOX，它們應用了Z-index屬性來嘗試打破他們天然的層疊順序。

灰色的BOX具備「9999」的Z-index值，藍色的BOX有「500」的Z-index值，金色的有「1」的Z-index值。合乎邏輯的，你會認爲這三個BOX的層疊順序會倒過來。但事實卻不是這樣，由於這些元素都沒被設定position屬性。
下面是一樣的三個BOX，分別都被設置了position: relative，他們的Z-index值仍是按照上面那段設定。

如今的結果是咱們所期待的了：這些元素的層疊順序實現了反向；灰色的BOX覆蓋在藍色之上，藍色的覆蓋在金色之上。
語法

#grey_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #ccc;  
    background: #ddd;  
    position: relative;  
    z-index: 9999;  
}  
#blue_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #4a7497;  
    background: #8daac3;  
    position: relative;  
    z-index: 500;  
}  
#gold_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #8b6125;  
    background: #ba945d;  
    position: relative;  
    z-index: 1;  
}
 
重複一下，Z-index屬性只能工做於那些被定義了position屬性的元素中。這並無被足夠的重視，尤爲是對於那些新手。
 
運用JavaScript
若是你但願經過JavaScript爲一個元素動態的加上Z-index 屬性，其語法同其餘大部分CSS元素能被存取相似，就是使用「駝峯命名法」取代CSS屬性中的連字符，就像下面的代碼展示的那樣。
var myElement = document.getElementById(」gold_box」);  
myElement.style.position = 「relative」;  
myElement.style.zIndex = 「9999″;
在IE 和 Firefox中的不當解析（兼容性問題）
在某些特定的狀況下，關於Z-index 屬性的解析會在IE六、IE7以及Firefox2版本中存在一些小小的先後矛盾。
IE中的<select>元素：
IE6中的<select>元素是一個窗口控件，因此它老是出如今層疊順序的頂部而不會顧及到天然層疊順序、position屬性或者是Z-index。下圖展現的就是這個問題。

<select>元素出如今了頂部，它被設置了「相對定位」而且Z-index值爲「1」。金色的BOX在這個層疊順序中排在了第二位，它的Z-index值是「9999」。由於天然層疊順序及Z-index值的緣由，在咱們目前所用的全部瀏覽器中金色的BOX都會排在頂部，但IE6除外。

這個IE6的BUG致使了不少覆蓋在<select>元素上的下拉菜單在彈出下拉選項時失敗的問題。一個解決辦法是使用JavaScript臨時隱藏<select>元素，等到下拉菜單的下拉項收回時再將<select>顯示出來。其餘的辦法會涉及到使用<iframe>。
IE6/IE7中被定位了的父容器：
因父容器（元素）被定位的緣故，IE6/7會錯誤的對其stacking context進行重置。爲了演示這個多少有些複雜的BUG，咱們再一次的放置兩個BOX，但此次咱們會將第一個BOX放置在一個被定位了的元素裏。

灰色BOX的z-index值是「9999」；藍色BOX的z-index值是「1」，這兩個BOX都被設置了position。因此，正確的執行應該是灰色的BOX覆蓋在藍色的之上。
可是在IE6和IE7中，咱們卻會看到藍色的BOX處於灰色的之上。這是由灰色BOX外層的父容器也被設置了定位形成的。這兩款瀏覽器錯誤的將被定位的父容器的stacking context進行了「重置」，但卻不該該這樣。灰色的BOX擁有一個很是高的Z-index值，它理應由於處在藍色BOX之上。其餘的瀏覽器對這個問題會進行正確的解析。 
 
Firefox 2中的負值：
在Firefox2版本中，一個負的Z-index值會使元素位於stacking context的後面，而不是位於公認的背景和邊框這樣的元素stacking context以前。下面的截圖展現了這個Firefox 2的BUG。

下面的是上面截圖的HTML版本（限於目前博客所限，作不到可以像Smashing Magazine那樣的內容部分顯示code demo，須要查看原始實例請去原文章查看） ，若是你在Firefox 3或者其餘目前正在被使用的瀏覽器中查看，你會看到正常的解析結果：灰色BOX的背景（元素stacking context的基底）出如今全部實物的下面，而且灰色BOX內部的文字出如今藍色BOX的上面。

廣泛應用的展現
對頁面中的元素應用z-index屬性能夠很是便捷的解決各類各樣的layout挑戰，同時使得設計者能夠在他們的設計中使用層疊的項目進行更多的創造。
交錯的滑動門菜單：
一個對這個CSS屬性實際應用的案例：CTCOnlineCME 這個網站對「正被點擊」的tab使用Z-index屬性及清晰交錯的PNG圖片，創造出很是好的效果。

CSS 氣泡：
Z-index 屬性還能夠用來實現基於CSS的提示氣泡，就像下面trentrichardson.com展現的那樣

Light Box：
若是不是由於應用了z-index 屬性，如今也不會有那麼多的品質優秀的Light Box腳本能夠無償使用，好比說JQuery的一個插件FancyBox。

Light box 腳本使用半透明的PNG圖片來使背景變暗，以後拿來一個新的元素，常常會使用相似窗口的DIV，將之放置在前排。覆蓋住屏幕的PNG和以後的DIV都使用Z-index 屬性以確保這2個元素會位於頁面其餘元素之上。
下拉菜單：
相似於Brainjar’s classic Revenge of the Menu Bar的下拉菜單使用Z-index以確保菜單的按鈕和他們的下拉項位於層疊的頂部。

畫廊效果的圖片展現：
將JQuery animation和Z-index組合能夠創造出幻燈片或畫廊式的卓越效果。usejquery.com 網站中的這個demo向咱們展現了這二者的絕妙組合帶給咱們的驚喜。

Polaroid Photo Gallery by Chris Spooner 採用功能更爲強大的CSS3同Z-index配合，創造出了一個當鼠標劃過期會從新碼放的超cool效果。

在Fancy Thumbnail Hover Effect 中Soh Tanaka 使用Query爲基礎的腳本改變z-index的賦值。

 

 

本文轉載於：http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html