CSS Property z-index








z-index sets the placement of a positioned element along the z-axis. Positive numbers are closer to the user, and negative numbers are further away.

Summary

ItemValue
Initial value auto
Inherited No.
Version CSS2
JavaScript syntax object.style.zIndex="1"
Applies to Positioned elements.




CSS Syntax

z-index: integer  | auto | inherit

Property Values

The property values are listed in the following table.

ValueDescription
auto Set the stack order equal to its parents. This is default
number Set the stack order. Negative numbers are allowed
inherit Inherit the z-index from the parent element

Browser compatibility

z-index Yes Yes Yes Yes Yes




Example

An example showing how to use z-index CSS property. 

<!DOCTYPE HTML>
<html>
<head>
  <style>
div#layer1 {<!--from www .ja v a  2  s  . c  o  m-->
  z-index: 3;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
  border: 1px solid #000000;
  padding: 5px;
}

div#layer2 {
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  background-color: pink;
  border: 1px solid #000000;
  padding: 5px;
}

div#layer3 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid #000000;
  padding: 5px;
}
</style>
</head>

<body>
  <div id="layer1"><h1>Layer One</h1></div>
  <div id="layer2"><h1>Layer Two</h1></div>
  <div id="layer3"><h1>Layer Three</h1></div>
</body>

</html>

Click to view the demo

Example 2

The z-index property sets the relative front-to-back order of an element.

The value for the z-index value is a number. A negative value are allowed. The default value for the z-index property is zero.

This property is only useful during overlapping.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            #id1 { <!--from w  ww  .  j a  v a  2 s.  c  o m-->
                z-index: 1; 
                position: absolute;
                top: 15px; 
                left:150px; 
            } 
            #id2 { 
                z-index: 2; 
                position: absolute;
                top: 25px; 
                left:120px; 
            } 
        </style> 
    </head> 
    <body> 
<p id="id1"> 
    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).
</p> 
<p id="id2"> 
    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).
</p> 
    </body> 
</html>

Click to view the demo