CSS z-index Property

Description

The z-index CSS property specifies the stack order of an element. This means that it determines which elements overlap and which ones are displayed on top. z-index only works on positioned elements (elements with a position value other than static). The higher the z-index value, the higher the element will appear in the stack order. For example, an element with a z-index of 10 will appear on top of an element with a z-index of 5. If two elements have the same z-index value, the element that is positioned later in the HTML code will appear on top.

Initial value: auto
Applies to: Positioned elements
Inherited: No
Computed value: As specified
Animatable: Yes
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