CSS z-index Property

CSS z-index property defines the stacking order of the positioned elements. An element is called a positioned element if it has its position other than static.

An element having a higher z-index value always covers the element with a lower z-index value. See the stacked elements below:

z-index: 10
z-index: 8
z-index: 6
z-index: 6
z-index: 8
z-index: 10

Example:

div{
  position: absolute;
  z-index: -1;
}

Here are few points to keep in mind while using the z-index property:

  • z-index only works with the positioned elements. An element is called positioned if it has its position except static.
  • An element having a higher z-index always covers the element having a lower z-index.

CSS Syntax

The z-index property has the following syntax:

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

Property Values

The z-index property accepts the following values:

autoSpecifies the same stacking order as parent element. This is the default value.
integerSpecifies the stacking order of the current element. It can be positive, negative, or zero.
initialSets the z-index property to its default value. Which is auto.
inheritInherits the z-index property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.zIndex = “-1”