What No One Told You About Z-Index (2013)

#1

Post by caffeinewriter » Thu, Mar 10, 2016, 8:01 PM UTC

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

Re: What No One Told You About Z-Index (2013)

#2

Post by jszymborski » Thu, Mar 10, 2016, 9:53 PM UTC

Another solution of to the problem is to change the background-color property, which isn't against his rules ;)

Re: What No One Told You About Z-Index (2013)

#3

Post by josephorjoe » Thu, Mar 10, 2016, 10:12 PM UTC

Good article. I've had that one bookmarked for a while, and it has saved me more than one headache. If you don't understand stacking context and z-index is not working as you expect, you need to go read this.

Re: What No One Told You About Z-Index (2013)

#4

Post by caffeinewriter » Thu, Mar 10, 2016, 10:27 PM UTC

josephorjoe wrote: post #3

Good article. I've had that one bookmarked for a while, and it has saved me more than one headache. If you don't understand stacking context and z-index is not working as you expect, you need to go read this.

This saved my ass, and my head from exploding. I found it while dealing with an obnoxious situation where a sibling element's background was causing background-color to not work at all when positioned behind said background-color having element. And it was fascinating to read about how z-index works. One of those little-known quirks to CSS that everybody really should know.

Re: What No One Told You About Z-Index (2013)

#5

Post by smpetrey » Thu, Mar 10, 2016, 10:30 PM UTC

Oh wow, this is great! Definitely pulled some hairs out regarding z-index more than once. What a great read.

Re: What No One Told You About Z-Index (2013)

#6

Post by kbsletten » Fri, Mar 11, 2016, 12:10 AM UTC

In modern CSS we have even more ways to do this, specifically many values of "transform:" will also create a new context.

Re: What No One Told You About Z-Index (2013)

#7

Post by kevinwang » Fri, Mar 11, 2016, 1:04 AM UTC

Ha ha ha what a great and simple markup language we have

Re: What No One Told You About Z-Index (2013)

#8

Post by iheredia » Fri, Mar 11, 2016, 1:59 AM UTC

I think the problem is not that few people reads the spec, but having picked a name that was now declarative. Something like 'context-order' would give a better hint that the stacking is not as simple as one might think. Choosing css property names is like designing the UI of css

Re: What No One Told You About Z-Index (2013)

#9

Post by pcwalton » Fri, Mar 11, 2016, 2:09 AM UTC

kevinwang wrote: post #7

Ha ha ha what a great and simple markup language we have

Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?

Re: What No One Told You About Z-Index (2013)

#10

Post by helpingcat » Fri, Mar 11, 2016, 2:54 AM UTC

This is pretty rough, but I created a Chrome extension to help look up the closest parent stacking context: https://github.com/gwwar/z-context