CSS z-index的用法
理清 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的用法