Skip to content

CSS z-index property

How the CSS z-index property controls element stacking order for positioned elements (absolute, relative, fixed, sticky) and flex items.

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;  
}

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.

Navigation