CSS中 z-index 的用法
語法：
z-index： auto，數值，inherit。
引數：
數值：
數值即是盒子在當前的堆疊環境中的堆疊層次。這個盒子也會建立一個新的堆疊環境。
auto：
生成的盒子的堆疊層次在當前堆疊環境中是0。除非它是根元素，否則它不會建立一個新的堆疊環境。
inherit:
規定應該從父元素繼承 z-index 屬性的值。
說明：
檢索或設定物件的層疊順序。
如兩個絕對定位物件的此屬性具有同樣的值，那麼將依據它們在HTML文件中宣告的順序層疊
對應的指令碼特性為zIndex。請參閱我編寫的其他書目。
CSS樣式表中Z-index屬性的一些特徵：
- Z-index屬性的預設值是0
- 元素可擁有負的 z-index 屬性值，如z-index:-1
- Z-index屬性無繼承性
- Z-index屬性JavaScript 使用語法：object.style.zIndex=”1″
- 幾乎所有主流瀏覽器都支援 Z-index 屬性
Z-index示意圖
Z-index例項
Z-index 用於將在一個元素放置於另一元素之後。
HTML 程式碼 複製<html><head><style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}</style></head><body>
效果圖：
Z-index 用於將在一個元素放置於另一元素之前。
HTML 程式碼 複製
<html><head><style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px
效果圖：
CSS樣式表中Z-index屬性使用的注意事項：
（1）Z-index僅對定位元素有效（如position:relative\absolute\float）；
（2）Z-index只可比較同級元素。這也許是大家很容易忽視的問題，我就卡在了這裡。也就是說，Z-index只能對同級元素進行分層展示；
（3）Z-index的作用域：假設A和B兩個元素都設定了定位（相對定位、絕對定位、一個相對一個絕對定位都可以），且是同級元素，樣式為：.boxA{z-index:4}
.boxB{z-index:5}
於是，不難看出，元素B的層級要高於元素A，在此需要指出的是，A元素下面的子元素的層級也同樣都低於B元素裡的子元素，即使你將A元素裡的子元素設為z-index:9999；同理元素B裡的子元素，即使是設的z-index:1它照樣比元素A的層級要高；
（4）這個屬性不會作用於視窗控制元件，如select物件。
（5）在父元素的子元素中設定Z-index的值，可以改變子元素之間的層疊關係
（6）子元素的Z-index值不管是高於父元素還是低於父元素，只要他們的z-index值是大於等於0的數，他們都會顯示在父元素之上，即壓在父元素上。只要他們的值是小於0的數，則顯示在父元素之下！