VietMX Staff asked 3 years ago
The z-index property in CSS controls the vertical stacking order of elements that overlap. z-index only effects elements that have a position value which is not static.
Without any 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 HTML hierarchy.
A stacking context is an element that contains a set of layers. A single default stacking context is created for every web page. The root of this context (the table) is the html element Or it can be a local stacking context, as created by specific properties and values. Within a local stacking context, the z-index values of its children are set relative to that element rather than to the document root.
