CSS z-index

The z-index CSS property specifies the layering or stack order of an element i.e. elements position value is one of absolute, fixed, or relative. The position of elements along the Z-axis which is perpendicular to the screen.

Syntax:

z-index: integer | auto | initial | inherit

Property Values:

integer The element’s box in the current stacking context.

auto The stack order equal to its parents.

initial This property to its default value.

inherit This property from its parent element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Example of CSS z-index property</title>
 <style>           
   div {                      
     top: 30px;
     left: 30px;
     width: 100px;
     height: 100px;
     position: absolute;
    }
    div.red {
      background: #ff0000;
      z-index: 1;
    }
    div.green {
      background: #00ff00;
      z-index: 2;
    }
    div.blue {
      background: #0000ff;
      z-index: 3;
    }
  </style>
</head>
<body>
 <div class="red">
   <div class="green">
     <div class="blue"></div>
   </div>
 </div>
</body>
</html>

OUTPUT:

CSS z-index