CSS Z-index

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

An element with greater stack order is always in front of an element with a lower stack order.

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

Example 1: Z-index

In this example, the image has a z-index of -1, so it will be placed behind the text.

Example 2: Z-index with Multiple Elements

Elements can be stacked using z-index.

Example 3: Without Z-index

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

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