The z-index property controls the vertical stacking order of elements that overlap. Think of the web page as a 3D environment; z-index determines what is closer to the viewer (higher value) and what is further away (lower value).

Prerequisites

Crucially, z-index only affects elements that have a position value other than static (e.g., relative, absolute, fixed, or sticky). It also works on flex children and grid children.

Stacking Contexts

A Stacking Context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user. Elements within a stacking context are stacked in order.

The most important rule: A child element is limited to the stacking level of its parent. If Parent A has z-index: 1 and Parent B has z-index: 2, a child of Parent A with z-index: 9999 will still appear behind Parent B.

Values

• Auto: The default. The box does not establish a new local stacking context.
• Integer: A number (positive, negative, or zero). Higher numbers are closer to the screen.