CSS z-index Property


Example

Set the z-index for an image:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Try it yourself »

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.zIndex="-1" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
z-index  1.0 4.0 3.0 1.0 4.0 


CSS Syntax

z-index: auto|number|initial|inherit;

Property Values

Value Description Play it
auto Sets the stack order equal to its parents. This is default Play it »
number Sets the stack order of the element. Negative numbers are allowed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: zIndex property



Color Picker

colorpicker