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.

See the Pen stacking context by majadc (@majadc) on CodePen.

Resources

• MDN The stacking context