HTML - DOM样式对象zIndex属性

HTML DOM样式对象**zIndex**属性用于设置定位元素的z轴顺序。堆叠顺序较高的元素会覆盖堆叠顺序较低的元素。

语法

设置zIndex属性

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

获取zIndex属性

object.style.zIndex;

属性值

值	描述
auto	这是默认值，允许浏览器指定元素的堆叠顺序。
数字	指定元素的堆叠顺序。也接受负值。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的堆叠顺序。

HTML DOM样式对象'zIndex'属性示例

在下面的示例中，我们更改了最初设置为-1的图像的堆叠顺序，然后将其设置为1以覆盖书面内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object zIndex Property
    </title>
    <style>
        #image {
            position: absolute;
            z-index: -1;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        Click to change stack order
    </p>
    <button onclick="fun()">Change Order</button>    
    <br><br>
    <img src="/plsql/images/plsql-mini-logo.jpg" id="image">
    <p>
        This text will be covered by Logo as image has 
    </p>
    <p>
        higher stack order which is 1.
    </p>
    <script>
        function fun() {
            document.getElementById("image")
                .style.zIndex = "1";
        }
    </script>
</body>
</html>

支持的浏览器

属性
zIndex	是 1	是 12	是 1	是 1	是 4

html_dom_style_object_reference.htm

打印页面