Latest web development tutorials
 

Style zIndex Property

< Style Object

Example

Change the stack order of an <img> element:

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

Definition and Usage

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

Internet Explorer Firefox Opera Google Chrome Safari

The zIndex property is supported in all major browsers.


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


< Style Object