Style zIndex Property

Example

Change the stack order of an <img> element:

document.getElementById("img1").style.zIndex = "1";
Try it Yourself »

Description

The zIndex property sets or returns the stack order of a positioned element.

An element with greater stack order (1) is always in front of another element with lower stack order (0).

Tip: A positioned element is an element with the position property set to: relative, absolute, or fixed.

Tip: This property is useful if you want to create overlapping elements.


Browser Support

Property
zIndex Yes Yes Yes Yes Yes

Syntax

Return the zIndex property:

object.style.zIndex

Set the zIndex property:

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

Property Values

Value Description
auto The browser determines the stack order of the element (based on its order in the document). This is default
number An integer that defines the stack order of the element. Negative values are allowed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


Technical Details

Default Value: auto
Return Value: A String, representing the stack order of an element
CSS Version CSS2

More Examples

Example

Change the z-index property value of an <div> element:

document.getElementById("myDIV").style.zIndex = "-1";
Try it Yourself »

Example

Return the z-index property value of an <img> element:

alert(document.getElementById("img1").style.zIndex);
Try it Yourself »

Related Pages

CSS tutorial: CSS Positioning

CSS reference: z-index property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.