z-index

設定定位物件的堆疊順序。

語法

{ z-index: vOrder}

可能的值

vOrder

指定或接收下列其中一個值的變數：

auto	預設值。根據物件出現在 HTML 來源中的順序，指定定位物件堆疊順序的字串。
order	指定堆疊順序中物件位置的整數。

此屬性的預設值為 auto 。這不是繼承屬性。

備註

正數的 z-index 值位於負數 (或值較小) 的 z-index 之上。具有相同 z-index 的兩個物件會根據來源順序進行堆疊。正數值會將元素置於未定義 z-index 的文字之上，負數值則會將元素置於該文字之下。將此參數設定為 Null 即可移除該屬性。

z-index 屬性只適用於將 position 屬性設為 relative 或 absolute 的物件。

此屬性不適用於視窗型的控制項，例如 select 物件。

滑鼠之類指標裝置的輸入不會對重疊元素有任何影響，即使元素並非看不見也是如此。具有負值 z-index 的定位元素同樣也是如此，除非：

• 父項是捲動容器 (也就是將其 overflow 屬性設定為 auto 或 scroll )。

• 父項已定位 (也就是將其 position 屬性設定為 absolute 、 relative 或 fixed )。

範例

下列範例使用 z-index 屬性來變更物件的堆疊順序。此範例使用內嵌樣式表來設定堆疊順序：

<img src="cone.jpg" style="position:absolute; 
    top:100px; left:100px; z-index:4"/>
<div style="position:absolute; top:100; left:100;
    color:red; background-color:beige; font-weight:bold; 
    z-index:1">
. . . </div>

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 2 (CSS2) (階層式樣式表 (CSS) 層級 2 (CSS2))  找到此屬性的定義。

適用範圍

a, abbr, acronym, b, bdo, big, blockquote, body, button, caption, center, cite, code, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, hn, hr, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, s, span, sub, table, td, th, tt, u, ul, var, xmp

另請參閱

概念

position