CSS z-index的用法

標籤：定義   dex   瀏覽器   存在   浮動   連續   bsp   css   數值   

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