CSS z-index Property

The z-index CSS property specifies the z-order of an element and its descendants or flex items. The z-order is the order of the element 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.

The z-index property has an effect only on the positioned elements.

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

<!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>

Another example with the z-index property:

Example

<!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>

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.




Related articles