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

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

by caffeinewriter • 10 years ago

141 26 10 years ago

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

kagamine• 10 years ago

Also allowing for breaking the rules, rules that don't exist in 'real life', was just to move the z-index property to the block defining all 3 colours. But it was breaking the rules that were there to illustrate the problem.

josephorjoe• 10 years ago

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.

caffeinewriter• 10 years ago

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.

smpetrey• 10 years ago

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

kbsletten• 10 years ago

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

kevinwang• 10 years ago

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

pcwalton6• 10 years ago

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

prewett2• 10 years ago

If by "stacking context" you mean "one global context," then no. But if you mean stacking contextS as described by the article, then Win32, Cocoa, Swing, Qt, wxWidgets, and probably Gtk are all examples of a system where z-index doesn't involve reading an article.

I've come to the conclusion that HTML is great for content that looks like 1999. But in 2016, every time I use HTML and CSS I end up dealing with some subset of

- width/height are ignored for div/span, so I have to make a div or span, set display:inline-block to completely undo that. Nothing like '<div style="display: inline-block;"> to suggest your language needs help.

- Actually, it turns out that width is still ignored for inline-block if you have no content in the tag, but if you put any content, then it is honored. (Unless you have more content than fits, in which case it is ignored again, but at least that is somewhat sensible)

- vertical centering? That should be pretty easy, right? Hahahaha!

- to get z-indexing to work, you need an absolutely positioned outer element with relatively positioned inner elements. Win32, Cocoa, Qt, Swing, despite their flaws aren't that user-unfriendly (and by "user" that would be the developer). I get why it has to be that way, but a language where it has to be that way is no end of frustration.

- don't want to duplicate your CSS colors all over the place? Great, use CSS vars. Want your variables to be accessible to all your classes? No problem, just use the :root class, totally obvious. Oh, need support for slightly older browsers? Bummer.

- Well, you could put all your colors in a separate class. Great, I'll just have my classes inherit or mixin that color class. Actually, no, I'll be putting that class all over my HTML, which kind of violates separation of concerns, which was the whole point of CSS.

- Want borders on the cells of your table, but not "3D" borders that looked terrible even in 1996? Oh, that's fun!

It's like HTML fights me at every turn. It's high time we take the ideas that UI libraries have had for decades and make an HTML that is actually usable.

(Probably some of the details here are inaccurate, because they are so convoluted that it's hard to actually remember them)

iheredia• 10 years ago

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

esnard2• 10 years ago

vertical-align is another example of the "this is not as simple as you might think" problem.

helpingcat• 10 years ago

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

heron88• 10 years ago

I just found this article on google after struggling with some z-index issues today, came to hacker news, and it's on the front page. The last time I read it was three years ago. What a coincidence.

wallacoloo• 10 years ago

So, is Firefox breaking the spec, then? The `opacity:0.99` edit doesn't change the appearance of the boxes at all in Firefox 45 on Linux. https://ipfs.pics/ipfs/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...

esnard2• 10 years ago

Firefox 45 on Windows, the boxes are displayed as expected: http://i.imgur.com/HaKqrcG.png

michus• 10 years ago

There is another way to solve this using just CSS transform property!

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

Related Stories