CSS z-index Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the z-index for an image:

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

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, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

Show demo ❯

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	Demo
auto	Sets the stack order equal to its parents. This is default	Demo ❯
number	Sets the stack order of the element. Negative numbers are allowed	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Positioning

HTML DOM reference: zIndex property