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

Interactive Demo

z-index: auto;

z-index: 3;

z-index: 5;

z-index: 7;

z-index: 9;

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

Browser Support

The following table will show you the current browser support for the CSS z-index property.

Desktop
12	1	1	4	1

Tablets / Mobile
18	4	14	1	1	37

Last updated by CSSPortal on: 31st December 2023