Skip to main content

CSS z-index property

The z-index property specifies the stack order of an element.

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order.

Syntax​

z-index: number | auto | inherit | initial;

Example:

img {  
    position:  absolute;  
    left:  0px;  
    top:  0px;  
    z-index:  -1;  
}
note

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

Without z-index​

If two positioned elements overlap each other without a z-index specified, the element defined last in the HTML code will be shown on top.

Table of Contents