[Cheat Sheet] CSS – Z index

Note: This is a cheat sheet. It’s sums up all the relevant information I collected on this topic. It can serve as your starting point of learning or relearning Z-index.  Follow the links bellow for more detailed explanations.

Stacking Order

  1. order of appearance in HTML (when no positioning is involved)
    • an element will overlap a predecessor (if a negative margin is set for example)
  2. any position element (and their children) is displayed in front of non-positioned elements
    • an element is position if it has a set positioned different from static – example relative, absolute, fixed
  3. z-Index
    • has effect on positioned element only
    • can change the hierarchy of the element only in its own context

Stacking Contexts

  • groups of elements with a common parent that move forward or backward together in the stacking order
  • has a single html element as its root element
  • root element and all children will have the same particular place in the stacking order
  • the z-index/positioning of the child elements are irrelevant outside the stacking context – you can’t places a child element above another element from a different stack context that is higher in the stacking order

Creating Stacking Contexts

  • background and borders of the root element of the document (the <html> document)
  • element with position and z-index set  (when an element has a position value other than static and a z-index value other than auto)
  • element with opacity less than 1
  • element with other css property that creates stacking context (transforms, filters, css-regions, paged media) – if a css property required rendering in a offscreen context, it must create a new stacking context

Stacking order within the same stacking context

  • the stacking order can be determined only in a stacking context
  • to change the stacking order between 2 elements, we must make sure they belong to the same stacking context – if not, determine which of their ancestors creates a new stacking order
  • the rules to determine stacking order (from back to front):
    1. root element
    2. positioned elements (and their children) with negative z-index values
    3. non-positioned elements (ordered by appearance in HTML)
    4. positioned elements (and their children) with z-index value of auto
    5. positioned elements (and their children) with positive z-index values
  • if 2 elements have the same level of priority (2-5 above) they are ordered by the appearance in HTML

Quick Note: No rocket science here. Although it took me quite a while to fully understand this, understanding the concept of stacking context was the key.

Links: Two awesome tutorials that wraps up everything:

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s