CSS z-index Property


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
Applies to
Positioned elements
Computed value
As specified
JavaScript syntax


z-index: auto | <integer>


  • <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


<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

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

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 20th September 2023