CSS z-index 屬性

定義和用法

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

注釋：元素可擁有負的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

說明

該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。

另請參閱：

CSS 教程：CSS 定位

HTML DOM 參考手冊：zIndex 屬性

實例

設置圖像的 z-index：

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

親自試一試

CSS 語法

z-index: auto|number|initial|inherit;

屬性值

值 描述
auto 默認。堆疊順序與父元素相等。
number 設置元素的堆疊順序。
inherit 規定應該從父元素繼承 z-index 屬性的值。

技術細節

默認值： auto
繼承性： no
版本： CSS2
JavaScript 語法： object.style.zIndex="1"

更多實例

Z-index
Z-index 可用于將在一個元素放置于另一元素之后。
Z-index
上例中的元素已經更改了 Z-index。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0