In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > zIndex

zIndex style property

Browser support:

Specifies or returns the stack level of positioned objects.

This element is useful if you want to create overlapping elements, like dialogs, tooltips or banners. Elements with the same z-index are stacked back-to-front according to HTML flow. The children of a stacked element are at the same stack level, if you want to use some overlap between them, you can use a minimum index of 0.

Syntax:

object.zIndex;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: z-index

Possible values:

The type of this property is string.

One of the following values:

auto

Default. Determines the stacking order of the positioned element automatically based on its order in the document.

inherit

Takes the value of this property from the computed style of the parent element.

level (integer)

Integer that specifies the stack level.

Default: auto.

Example HTML code 1:

This example illustrates the use of the z-index property:

<head>
    <style>
        .zindex1 {
            z-index: 1;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 80px;
            left: 80px;
        }
        .zindex2 {
            z-index: 2;
            background-color: red;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 140px;
            left: 145px;
        }
    </style>
</head>
<body>
    <div class="zindex2">z-index: 2</div>
    <div class="zindex1">z-index: 1</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the zIndex property in JavaScript:

<head>
    <style>
        #zindex1 {
            z-index: 1;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
            position: relative;
            top: 0px;
            left: 0px;
        }
        #zindex2 {
            z-index: 2;
            background-color: red;
            width: 80px;
            height: 80px;
            position: relative;
            top: -55px;
            left: 35px;
        }
    </style>

    <script type="text/javascript">
        function ChangeZIndex (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var indexValue = selectTag.options[whichSelected].text;

            var firstDiv = document.getElementById ("zindex1");
            firstDiv.style.zIndex = indexValue;
            firstDiv.innerHTML = "z-index: " + indexValue;
        }
    </script>
</head>
<body>
    <div id="zindex1">z-index: 1</div>
    <div id="zindex2">z-index: 2</div>

    <br />
    Change the z-index property:
    <select size="5" onchange="ChangeZIndex (this)">
        <option />0
        <option selected="selected" />1
        <option />2
        <option />3
        <option />4
    </select>
</body>