CSS Tutorial

CSS Z-Index

z-index is used to control the vertical stacking order of elements (which element appears on top of others).

Only works on elements with a position value other than static (e.g., relative, absolute, fixed, or sticky).

Syntax

element {
  position: absolute;
  z-index: 2;
}

Interactive Example:

The green box has a higher z-index and overlaps the red box.

Important Notes:

• Higher z-index value = element appears on top.
• If two elements have the same z-index, the one written later in the HTML appears on top.
• It only works on positioned elements (not static).