Z-index

Stacking order

No z-index and position properties specified:

  •  the stacking order is the same as the order of appearance in the HTML

 

position is specified (other than static):

  • any positioned elements (and their children) are displayed in front of any non-positioned elements

 

z-index is specified:

  • z-index only works on positioned elements
  • z-index values can create stacking contexts

Stacking context

Groups of elements with a common parent.

 

Can be formed in one of three ways:

  • the root element of a document (the <html> element)
  • has a position !== static and a z-index !== auto
  • several newer CSS properties also create stacking contexts
    • ​opacity, transforms, filters, css-regions, paged media

 

General rule, if a CSS property requires rendering in an offscreen context, it will create a new stacking context.

Within the Same Context

From back to front:

  • context root element
  • positioned elements (and their children) with negative z-index values
  • non-positioned elements
  • positioned elements (and their children) with a z-index value of auto 
  • positioned elements (and their children) with positive z-index values

 

The ordered is always as appearance in the HTML.

Made with Slides.com