Last updated 1 year ago by Philippe Sutercss
There’s not a lot to learn here, but it’s just the sort of data and analysis I enjoy seeing. Unsurprisingly, people love using z-index values like 1000 and 9999 just to make sure their element of choice is rendered on top
Elements on web pages are mostly side-by-side, or above and under each other. Occasionally however, a design calls for two or more elements to overlap. Familiar examples include unfolding navigation menus, preview panes when hovering a link, unhelpful banners about cookies, and of course countless popups demanding your immediate attention.
How I became great at everything A tale of courage, guile, and unsupported assertions. Not Bali It was December in Bali. I was dozing off when the Slack notification jolted me awake. I felt an unfamiliar pull, and for the first time, I looked not at the bouncing icon, but over the lotus-covered pond, and straight into the glistening sea; I was living life wrong.
My relentless pursuit of perfection had taken a toll. Running three companies was pushing me to my limits; I had been forced on multiple occasions to pull a 5- or even 6-hour work week. The Hindu temples I had come to surround myself with were whispering to me. The language was foreign and the voice indecipherable, but the message was crystal clear:
Pardon the interruption. When two elements overlap, their z-index values determine which one is shown on top. In these situations, the browser must somehow decide which elements to draw “on top”, and which elements to keep in the background, fully or partially covered. A relatively complex1 set of rules in the CSS standard defines a default stacking order for every element in a page. When the default order is unsatisfactory, developers resort to the z-index property: it gives control over a virtual z axis (depth), defined conceptually as going “through” the page. An element with a higher z-index is thus displayed “closer” to the user, that is, painted on top of elements with lower indices.
An interesting property of the z axis is that it does not have natural bounds. The horizontal and vertical axes are typically restricted by the expected dimensions of the display. We would not expect any elements to be positioned “1000000px from the left” or “-3000em from the top”: they would either be invisible, or incur unpleasant amounts of scrolling.2 Values for z-index however are unitless, and only matter in relative terms: a page with two elements will look the same if the z indices are 1 and 2, or -10 and 999. This, combined with the fact that pages are often assembled from components developed in isolation, leads to the curious art of picking appropriate z indices.
How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win.
That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.