The CSS z-index property determines which positioned elements appear in front of or behind other elements when they overlap. A higher stacking value normally places an element above an element with a lower stacking value.

When elements overlap, CSS uses stacking rules to determine which element should appear on top. The z-index property can change this order for elements that participate in a stacking context.

.box-one {
  position: relative;
  z-index: 1;
}

.box-two {
  position: relative;
  z-index: 2;
}

.box-three {
  position: relative;
  z-index: 3;
}

Positive z-index values such as 1, 10 or 100 can be used to place an element above another element in the same stacking context.

.back {
  position: relative;
  z-index: 1;
}

.front {
  position: relative;
  z-index: 10;
}

Negative values can place an element behind other elements in its stacking context. For example, z-index: -1 can be used for decorative background layers.

.background {
  position: absolute;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
}

A value of 0 establishes a normal numeric stacking level within the relevant stacking context.

When positioned elements overlap, their stacking order is affected by stacking contexts and their z-index values. Higher stacking levels generally appear above lower levels within the same context.

A common pattern is to combine position with z-index. This is frequently used for menus, overlays, badges, popups and navigation components.

.element {
  position: relative;
  z-index: 20;
}

A stacking context is a self-contained layer in the browser’s rendering order. Properties such as positioned elements with a non-auto z-index, opacity below 1, transforms and certain other CSS properties can create stacking contexts.

Responsive designs sometimes require different stacking priorities. Media queries can change z-index values when the layout changes.

.menu {
  position: relative;
  z-index: 20;
}

@media (max-width: 600px) {

  .menu {
    z-index: 1000;
  }

}