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

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

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

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

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

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; 
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
4	12	1	1	4	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 1st November 2019