The CSS z-index property is used to control the stacking order of elements that overlap each other in a web document. It determines which elements appear on top of others along the z-axis, which can be visualized as a depth axis perpendicular to the screen. The z-index property only affects elements that are positioned (i.e., elements with position properties set to absolute, relative, fixed, or sticky)[3][11][12][13][15].
Understanding z-index
The z-index property accepts integer values (including negative values), where higher values place the element further towards the viewer, making it appear on top of elements with lower values. If no z-index value is specified, the element's stack order is determined by its position in the HTML document; elements later in the document stack on top of those that are earlier[3][11][12][13][15].
For example, if two overlapping elements are both positioned but only one has a z-index specified, the one with the z-index will appear on top, regardless of their order in the HTML[11][15].
Forming a Stacking Context
A stacking context is an important concept in CSS as it defines the scope within which z-index values are considered. It confines the z-index interactions to within the elements of that context, preventing them from interacting with the z-index values of elements outside the context[1][2][4][5].
A stacking context can be formed in several ways:
By default, the root element (usually the <html> element) forms the base stacking context[6].
Positioning and z-index: Any positioned element (other than with position: static) that has a z-index value other than auto establishes a new stacking context[2][3][4][5].
CSS properties: Certain CSS properties such as opacity (less than 1), transform, filter (not none), clip-path, mask, perspective, contain, and will-change (when specified with any of the above properties) also create stacking contexts[4][5].
