The Stacking context

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.


Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.