CSS Z-index

The CSS z-index Property

The z-index property specifies the stack order of positioned elements.

The stack order defines which element should be placed in front or behind other elements.

When elements are positioned, they can overlap other elements.

An element can have a positive or negative stack order (z-index):

<img style="position:absolute;left:30px;top:15px;z-index:0;height:250px;" src="img_tree.png">

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

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).

Another z-index Example

A positioned element with a greater stack order is always above an element with a lower stack order.

Example

Without z-index

If several positioned elements overlap each other without a z-index specified, the elements render in the order they are defined in the HTML source code.

Example

CSS Property