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: 8
z-index: 6
z-index: 4
z-index: 2
Change z-index

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
Edge Chrome Firefox Opera Safari
121141
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 31st December 2023