z-index

語法:

z-index: auto | <integer>

預設值auto

適用於:定位元素。即定義了position非static的元素

繼承性:無

動畫性:當值為<integer>

計算值:指定的值

媒 體:視覺

取值:

auto:
元素在目前層疊上下文中的層疊級別是0。元素不會建立新的局部層疊上下文,除非它是根元素。
<integer>
用整數值來定義堆疊級別。可以為負值。

說明:

定義一個元素在檔案中的層疊順序
  • z-index用於確定元素在目前層疊上下文中的層疊級別,並確定該元素是否建立新的局部層疊上下文。
  • 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定(每個元素僅屬於一個層疊上下文)。
  • 同一個層疊上下文中,層疊級別大的顯示在上面,反之顯示在下面。
  • 同一個層疊上下文中,層疊級別相同的兩個元素,依據它們在HTML檔案流中的順序,寫在後面的將會覆蓋前面的。
  • 不同層疊上下文中,元素的顯示順序依據祖先的層疊級別來決定,與自身的層疊級別無關。
  • z-index未定義或者值為auto時,在IE6,7下會建立新的局部層疊上下文,而在高級瀏覽器中,按照規范不產生新的局部層疊上下文,如下例:

    demo:

    div { position: relative; } p { position: absolute; } .a { background: #f00; z-index: 10; } .b { background: #0ff; z-index: 3; } <div class="test"> <p class="a">asdas</p> </div> <div class="test2"> <p class="b">asdas</p> </div>

    細心的你會發現上述程式碼在IE6,7下的呈現與高級瀏覽器下不同。.test1和.test2未設定z-index,在高級瀏覽器下不會產生新的局部層疊上下文,也就是說它們的子元素沒有被新的局部層疊上下文包裹,那麼它們的子元素就處在同一個層疊上下文中,可以直接通過自身的層疊級別來決定顯示順序,所以結果是.a 覆蓋了.b,因為.a的層疊級別比.b高;而在IE6,7下,.test1和.test2會產生新的局部層疊上下文,即它們的子元素被新的局部層疊上下文包裹,於是子元素顯示順序只能依賴.test1和.test2層疊級別來確定。所以結果是.b 覆蓋了.a,因為.b的父元素.test2在HTML檔案流中排在.test1之後,後來者居上覆蓋前者。參見demo: z-index建立局部層疊上下文在IE6,7下與高級瀏覽器下的區別

  • 對應的腳本特性為zIndex

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
負值 #1
  1. z-index負值是CSS2.1中定義的,在CSS2中是不被支援的;

示例: