It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Z-Index Property

Reading time 1 min
Published Sep 8, 2017
Updated Oct 1, 2019

What is z-index?

Using the CSS z-index property, you can manipulate vertical stacking for overlapping elements:

Example
img {         
   position: absolute;                
   z-index: -1;   
}

Note: if you worry about z-index not working, make sure to only use it for elements which have their position value defined as static.

CSS z-index property syntax

To define the z-index for an element, you need to specify one value:

z-index: value;

The default value is auto, which means the stacking level depends on the parent container.

To define a custom level, use a unitless number. Elements with higher values will cover the ones with smaller values.

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
4+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All