HTML - DOM Style Object zIndex Property

Quiz

HTML DOM Style Object zIndex property is used to set the z-order of a positioned element. Elements with higher stack order cover elements with lower stack order.

Syntax

Set the zIndex property:

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

Get the zIndex property:

object.style.zIndex;

Property Values

Value	Description
auto	It is the default value which lets browser specify the stack order of element.
number	It specifies the stack order of the element. It also accepts negative values.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents stack order of an element.

Example of HTML DOM Style Object 'zIndex' Property

In the following example, we are changing stack order of the image which is initially set to -1, then it is set to 1 to cover the written content.

<!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>

Supported Browsers

Property
zIndex	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page