CSS z-index Property

The CSS z-index property specifies the z-order of an element and its descendants or flex items. The z-order is the order of elements on the z-axis.

The z-index of an element specifies its order inside a stacking context. A stacking context is a group of elements that have a common parent.

The element which has the higher stack order is in front of the element with a lower stack order. Elements having non-static positioning are on top of elements with default static positioning.

The z-index property affects only positioned elements that have a value other than “static”.

Initial Value auto
Applies to Positioned elements.
Inherited No.
Animatable Yes.
Version CSS2
DOM Syntax object.style.zIndex = "-1";

Syntax

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

Example of the z-index property with a negative value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      position: absolute;
      left: 0;
      top: 10px;
      z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100">
  </body>
</html>

Example of the z-index property with a positive value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey{
      position: absolute;
      width: 150px;
      height: 150px;
      color: #eee;
      opacity: 0.95;
      padding: 15px;
      line-height: 100px;
      text-align: center;
      }
      #blue{
      z-index: 1;
      background-color: #1c87c9;
      top: 60px;
      left: 50px;
      line-height: 1;
      }
      .black{
      height: 80px;
      width: 160px;
      background-color: #000;
      line-height: 100px;
      bottom: 20px;
      position: absolute;
      z-index: 10;
      }
      #green{
      z-index: 2;
      background-color: #8ebf42;
      top: 100px;
      left: 170px;
      }
      #grey{
      background-color: #666;
      top: 200px;
      left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>

Result

Values

Value Description
auto The stack level of the generated box is equal to its parents. This is the default value of this property.
number The stack level of the generated box specified by numbers. Negative values are valid.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Do you find this helpful?

Related articles