8 ms·

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

141 points by caffeinewriter 11y ago

jszymborski 11y ago
Another solution of to the problem is to change the background-color property, which isn't against his rules ;)
- kagamine 11y 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 11y 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 11y 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 11y ago
Oh wow, this is great! Definitely pulled some hairs out regarding z-index more than once. What a great read.
kbsletten 11y ago
In modern CSS we have even more ways to do this, specifically many values of "transform:" will also create a new context.
kevinwang 11y ago
Ha ha ha what a great and simple markup language we have
- pcwalton 11y ago
  Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?
  - prewett 11y 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 11y 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
- esnard 11y ago
  vertical-align is another example of the "this is not as simple as you might think" problem.
helpingcat 11y 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 https://github.com/gwwar/z-context
heron88 11y 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 11y 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/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2JK983EUTNG https://ipfs.pics/ipfs/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...
- esnard 11y ago
  Firefox 45 on Windows, the boxes are displayed as expected: http://i.imgur.com/HaKqrcG.png http://i.imgur.com/HaKqrcG.png
michus 11y ago
There is another way to solve this using just CSS transform property!

141 points by caffeinewriter 11y ago

jszymborski 11y ago

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

kagamine 11y 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 11y 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 11y 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 11y ago

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

kbsletten 11y ago

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

kevinwang 11y ago

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

pcwalton 11y ago
Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?
- prewett 11y 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 11y 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

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

helpingcat 11y 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 https://github.com/gwwar/z-context

heron88 11y 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 11y 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/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2JK983EUTNG https://ipfs.pics/ipfs/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...

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

michus 11y ago

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