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

You are here: Reference > CSS > properties > z-index

z-index property

Browser support:

Specifies 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.

JavaScript page for this property: zIndex. You can find other example(s) there.

Possible values:

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>