Style zIndex 屬性

定義和用法

zIndex 屬性設置或返回定位元素的堆疊順序。

具有較大堆疊順序 (1) 的元素始終位于具有較低堆疊順序 (0) 的另一個元素之前。

提示：定位元素是 position 屬性 設置為：relative、absolute 或 fixed 的元素。

提示：如果要創建重疊元素，此屬性很有用。

另請參閱：

CSS 教程：CSS 定位

CSS 參考手冊：z-index 屬性

實例

例子 1

更改 <img> 元素的堆疊順序：

document.getElementById("img1").style.zIndex = "1";

親自試一試

例子 2

更改 <div> 元素的 z-index 屬性值：

document.getElementById("myDIV").style.zIndex = "-1";

親自試一試

例子 3

返回 <img> 元素的 z-index 屬性值：

alert(document.getElementById("img1").style.zIndex);

親自試一試

語法

返回 zIndex 屬性：

object.style.zIndex

設置 zIndex 屬性：

object.style.zIndex = "auto|number|initial|inherit"

屬性值

值 描述
auto 瀏覽器確定元素的堆疊順序（基于它在文檔中的順序）。默認。
number 定義元素的堆疊順序的整數。允許負值。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： auto
返回值： 字符串，表示元素的堆疊順序。
CSS 版本： CSS2

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持