z-index is hard: a Google bug

You'd think Google tests their websites extensively. Especially one of their flagship products, such as google.com. Especially the main page.

I'm sure they do, but testing GUI across all browsers and screen sizes is difficult.

A screenshot of google.com from June 21, 2019, in Tor Browser.

Let's zoom in.

See how, when expanding the menu, the search field is on top of the menu? The Gmail icon is mostly hidden behind the search field. This is a typical z-index bug: one component incorrectly overlayed something else.

The first two dimensions on a screen are the X and Y coordinates. In CSS, the z-index is the third dimension, indicating the "distance" from the user. A larger z-index means that a component is closer to the user. In this case, the search field has a larger z-index than the menu, leading to this layout bug.

Why would Google make such a basic mistake? On a complex website it gets tricky, because the z-index is a global value that must be coordinated across all components. If you have a component A with z-index 100 and another component B that should go on top, you might assign the B component a z-index of 101. But what happens if you need to place a third component C in between? Well, then you'll need to change the z-index of either A or B too. It gets tricky real fast.

A good general strategy when designing websites is to avoid z-index where possible. And you should also have a single, separate CSS file, whose only purpose is to keep track of z-indexes.