共用方式為

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>

標準資訊

此屬性是在階層式樣式表 (CSS) 層級 2 (CSS2) (英文) 中定義。

適用於

A、ADDRESS、APPLET、B、BIG、BLOCKQUOTE、BUTTON、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、CUSTOM、DD、DEFAULTS、DFN、DIV、DL、DT、EM、FIELDSET、FORM、I、IFRAME、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、LI、OL、P、S、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XMP

請參閱

概念

position