理清 position及z-index的用法:

static : 　無特殊定位，對象遵循HTML定位規則
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框
relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置,

z-index：其實從字面上已經可以解釋；z是從x、y以後的第三個軸，從網頁上表現就是除了上下左右外的前後。
規定這個屬性，首先要求Div必須是浮動的，z值越大，Div越靠前；數值可以不連續。

CSS樣式表中Z-index屬性使用的註意事項：
1、Z-index僅對定位元素有效（如position:relative）；
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、這個屬性不會作用於窗口控件，如selected對象。

層級關系的比較:

1.對於同級元素, 默認 (或 position:static) 情況下文檔流後面的元素會覆蓋前面的.
2.對於同級元素, position 不為 static 且 z-index 存在的情況下 z-index 大的元素會覆蓋 z-index 小的元素, 即 z-index 越大優先級越高.
3.IE6/7 下 position 不為 static, 且 z-index 不存在時 z-index 為 0, 除此之外的瀏覽器 z-index 為 auto.
4.z-index 為 auto 的元素不參與層級關系的比較, 由向上遍歷至此且 z-index 不為 auto 的元素來參與比較.

CSS z-index的用法