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

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

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.

In modern CSS we have even <i>more</i> ways to do this, specifically many values of &quot;transform:&quot; will also create a new context.

So, is Firefox breaking the spec, then? The `opacity:0.99` edit doesn&#x27;t change the appearance of the boxes at all in Firefox 45 on Linux. <a href="https:&#x2F;&#x2F;ipfs.pics&#x2F;ipfs&#x2F;QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2JK983EUTNG" rel="nofollow">https:&#x2F;&#x2F;ipfs.pics&#x2F;ipfs&#x2F;QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...</a>

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

This is pretty rough, but I created a Chrome extension to help look up the closest parent stacking context: <a href="https:&#x2F;&#x2F;github.com&#x2F;gwwar&#x2F;z-context" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gwwar&#x2F;z-context</a>

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

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

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

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