What No One Told You About Z-Index

#1

Post by philipwalton » Tue, Jan 15, 2013, 8:27 PM UTC

What No One Told You About Z-Index
philipwalton.com

Re: What No One Told You About Z-Index

#2

Post by taylorfausak » Tue, Jan 15, 2013, 9:23 PM UTC

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...

Re: What No One Told You About Z-Index

#3

Post by faramarz » Tue, Jan 15, 2013, 9:35 PM UTC

But I got the same result by assigning z-index 2 and 3 to the other colors.

So the results is the same, but the method is incorrect? does it matter? hmm

http://codepen.io/anon/pen/DlyAv

Re: What No One Told You About Z-Index

#4

Post by pattern » Tue, Jan 15, 2013, 9:36 PM UTC

taylorfausak wrote: post #2

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…

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!

Re: What No One Told You About Z-Index

#5

Post by bunkat » Tue, Jan 15, 2013, 9:40 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

This is what I did as well. Seems to make more sense to me than putting an odd opacity value on an element.

Re: What No One Told You About Z-Index

#6

Post by taeric » Tue, Jan 15, 2013, 9:40 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

The point was that you can "alter the z-index" without actually altering the z-index. At least, that was my takeaway.

Re: What No One Told You About Z-Index

#7

Post by dazmax » Tue, Jan 15, 2013, 9:40 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

The point of the example was to show how something other than z-index, position, and order can affect stacking. It wasn't demonstrating the correct way to go about changing the stacking order.

Re: What No One Told You About Z-Index

#8

Post by Argorak » Tue, Jan 15, 2013, 9:43 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

The point was to illustrate the stacking behaviour introduced by opacity, not how to trivially arrange 3 elements using z-index.

Re: What No One Told You About Z-Index

#9

Post by philipwalton » Tue, Jan 15, 2013, 9:44 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

The point was that there are factors other than z-index involved in determining the stacking order. I'm certainly not suggesting anyone use opacity to move things around in the stacking order. I was just trying to make people aware of it. It's confusing if you don't know what's going on.

Re: What No One Told You About Z-Index

#10

Post by khwang » Tue, Jan 15, 2013, 9:49 PM UTC

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

The point of this exercise was to show that opacity has an effect on element position, which was surprising to me! It matters because it might fix a z-index bug you have one day (: