CSS z-index Property

Description

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Initial value: auto
Applies to: Positioned elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: Yes
CSS Version: CSS2, CSS3
JavaScript syntax: object.style.zIndex

Syntax

z-index: auto | <integer>

Values

<integer>Integer that specifies the position of the object in the stacking order. The value is arbitrary and may be negative, zero, or positive.
autoSpecifies the stacking order of the positioned objects based on the top-down order in which the objects appear in the HTML source.
inherit

Example

HTML

<div class="test1">-1</div> 

<div class="test2">3</div> 

<div class="test3">2</div> 

<div class="test4">1</div>

CSS

div {
   position: absolute; 
   width: 100px;
   height: 100px; 
   border: 1px solid black; 
   color: white;
}
.test1 {
   left: 15px; 
   top: 15px;
   background-color: red;
   z-index: -1; 
}
.test2 {
   left: 30px; 
   top: 35px;  
   background-color: blue;
   z-index: 3;  
}
.test3 {
   left: 45px; 
   top: 20px; 
   background-color: green; 
   text-align: right; 
   z-index: 2; 
} 
.test4 {
   left: 60px; 
   top: 60px; 
   background-color: sienna; 
   text-align: right; 
   z-index: 1; 
}

Result