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
支持 支持 支持 支持 支持