The Z Dimension

There’s no escaping it – the way a browser stacks elements on a page is complicated. With positioning, floats, opacity and lexical ordering all having their own effects, and z-index not quite working how most people expect, it was already hard enough to get your head around. Now, however, with 3D transforms radically changing what’s possible on the web, things are even more complex.

This short talk will cover a few lessons and guidelines to demystify the Z-dimension – what a stacking context is, how events are distributed, how transforms (3D & 2D) are handled by the browser, and how to untangle a vertical mess. And, as a bonus, how a better understanding of depth leads to higher-performing websites.