Developing Web Components

Chapter 4. Understanding and Managing z-index

Jason Strimpel

How many times have you seen CSS similar to the following?

.some-selector {
    position: relative;
    z-index: 3870814; /* do NOT change!!! */
}

It is probably safe to assume that the element in question is not competing with 3,800,000+ elements to be the top element on the page. If so, the developer has an amazing mental map of a massive page that would likely crash any browser!

Typically when you encounter CSS and comments like these it is because there was confusion not about the z-index property and value itself, but rather about the other factors that contribute to the stacking order of an element on a page—stacking contexts, positioning, opacity, etc.

Certain steps can be taken to prevent CSS and comments like those in the previous example, but first one must have a solid understanding of the z-index property and all the contributing factors that ultimately determine how elements are layered.

What Exactly Is the z-index Property?

Per the W3C, the z-index property is used to specify:

1. The stack level of the box in the current stacking context

2. Whether the box establishes a stacking context

The W3C definition is concise and accurate. However, the definition assumes knowledge of stacking contexts, which is not an introductory z-index topic. The W3C also provides an elaborate explanation of stacking contexts. This information, while accurate, does not make a good basis for fully understanding the z-index property unless ...