CSS z-index Property

Definition and Usage

The z-index property sets the stacking order of the element. Elements with a higher stacking order are always in front of elements with a lower stacking order.

Note:Elements can have negative z-index property values.

Note:Z-index only works on positioned elements (such as position:absolute;)!

Description

This property sets the position of a positioned element along the z-axis, where the z-axis is defined as the axis extending vertically into the display area. If it is a positive number, it is closer to the user, and if it is a negative number, it indicates that it is further from the user.

See Also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:zIndex Property

Example

Set the z-index of the image:

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

Try It Yourself

CSS Syntax

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

Property Value

Value Description
auto Default. The stacking order is equal to the parent element.
number Sets the stacking order of the element.
inherit Specifies that the z-index property should inherit its value from the parent element.

Technical Details

Default Value: auto
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.zIndex="1"

More Examples

Z-index
Z-index can be used to place an element after another.
Z-index
The element in the above example has changed the Z-index.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0