The CSS Z-Index Property

What is z-index?

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

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.

Theory is great, but we recommend digging deeper!

Responsive Web Design Course: Learn How to Make a Responsive Website

BitDegree Foundation VSI ©

4.5 (66)

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

Chrome

1+

Edge

12+

Firefox

1+

IE

4+

Opera

4+

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

All

Safari

All