z-index - HTML CSS CSS Property

HTML CSS examples for CSS Property:z-index

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. z-index

Description

The z-index CSS property sets the stacking order for the positioned elements.

The following table summarizes the z-index Property.

Item Value
Default value: auto
Applies to:Positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


z-index:     integer | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
integer Sets the stack level. Negative integer values are allowed.
autoThe stack level of the element's box is the same as its parent's box. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element z-index property.

The example below shows the z-index property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS z-index property</title>
  <style type="text/css">
      div {<!-- www .  j a v a  2s  .c  om-->
          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>

Related Tutorials