z-index property in CSS controls the vertical stacking order of elements that overlap.
z-index only affects positioned elements (elements which have a
position value which is not
static) and its descendants or flex items.
z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.
A stacking context is an element that contains a set of layers. Within a local stacking context, the
z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher
z-index than element B.
Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as
opacity less than 1,
filter that is not
transform that is not
Note: What exactly qualifies an element to create a stacking context is listed in this long set of rules.