On: What No One Told You About Z-Index

[taylorfausak]

The key takeaway:

  > New stacking contexts can be formed [… w]hen an element has an 
  > opacity value less than 1.

I had no idea that was the case. The CSS 2.1 spec [1] notes that "other properties may introduce stacking contexts, for example 'opacity'". The CSS 3 spec [2] elaborates:

  > Since an element with opacity less than 1 is composited from a
  > single offscreen image, content outside of it cannot be layered
  > in z-order between pieces of content inside of it.

[1]: http://www.w3.org/TR/CSS2/visuren.html#z-index [2]: http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparen...

[pattern → taylorfausak]

My main takeaway was the following:

    Z-index only works on positioned elements. If you
    try to set a z-index on an element with no position
    specified, it will do nothing.

I know I have scratched my head in the past trying to get z-index do what I want, and this knowledge probably would have helped!

[Hansi → pattern]

Agree, I remember that it took me a while to figure this out when I first tried playing with z-indexes.