In the DOM each element has its palace and their order is determined by the order the elements appear in the HTML. But this order will change if the elements meet certain conditions, e.g they will be positioned with z-index then it creates stacking context.

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