Within the Document Object Model (DOM), each element is assigned a position based on the order in which it appears in the HTML. However, this order may change under certain conditions, such as when the elements are positioned using the z-index property, which can create a new stacking context and change the order in which the elements are displayed.
The order in stacking context
The order of the elements within a stacking context beginning from the back to front:
- The root element of the stacking content
- The elements positioned with negative z-index along with their children
- The elements that don’t have position property.
- The elements with z-index set to auto along with their children.
- The elements with positive z-index along with their children.