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 the 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”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment