Web Element Stacking Made Easy: The Z-Index Property

Ben Bachtler • December 20, 2016

If you’re familiar with CSS , then you may be familiar with the z-index property. You might know that z-indices ensure your formatting layers appear in the correct order, but how exactly do they work? How do they act? How can I utilize them to enrich the design and content on my webpage? In this blog post, I will cover what z-index does on a webpage, some of its more refined functionality, and its associations with stacking context.

In a basic sense, you can think about z-index in terms of layers. If you have a webpage where multiple elements are overlapping, z-index values can be assigned to these elements to ensure one element is shown in front of or behind another. Here’s an example.

As you can see, elements with a lower z-index value will appear behind those with a higher value. Relatively straightforward, right? That was almost so easy. Well, it turns out that there is more complexity to master in z-index and element stacking in general.

The first thing to note is that z-index requires an element’s position property to be either Absolute, Fixed, or Relative. Without a set property, it simply won’t work. The next thing to consider is how elements are ordered on a page. To better understand ordering, we need to learn about stacking contexts, natural stacking order, and where z-index figures into all of this.

A stacking context is formed by the following:

1. The root element (HTML)
2. Positioned element with a z-index value other than “auto”
3. A flex item with a z-index value other than “auto” (parent has display: flex|inline-flex)
4. Elements with an opacity value less than 1
5. Transform value other than “none”
6. Mix-blend-mode value other than “normal”
7. Filter value other than “none”
8. Perspective value other than “none”
9. Isolation set to “isolate”
10. Position set to “fixed”
11. Elements with -webkit-overflow-scrolling set to “touch”

Stacking contexts are self-contained and independent from siblings. This means that only descendant elements are considered when stacking. Furthermore, a stacking context can be contained within a stacking context, creating a hierarchy. A natural stacking order is followed within a context. From back to front, the order is:

1. Backgrounds and borders of the element that establish stacking context
2. Elements with negative stacking contexts, in order of appearance
3. Non-positioned, non-floated, block-level elements, in order of appearance
4. Non-positioned, floated elements, in order of appearance
5. Inline elements, in order of appearance
6. Positioned elements, in order of appearance

From there, we can then add z-indices to further influence element stacking order (from back to front):

1. Negative stack level (z: -1 or lower)
2. Position: static (z: default)
3. Stack level = 0 (z: auto)
4. Positive stack level (z: 1 or higher)

If these concepts appear complex, it’s okay, because they can be. Understanding these complex concepts is important so that we can simplify this property into two simple steps:

1. Change the element’s position property
2. Assign a numerical z-index value

In most cases, these two simple steps are all that’s required. Easy, right?

Although z-index requirements and interactions appear complex and cumbersome, indexing page elements is simpler than you think, and is an undeniably effective method of optimizing the design of your page.

Ben Bachtler is a Demandware applications engineer on the eCommerce implementation team in LYONSCG’s Chicago office.

About the author

Ben Bachtler

Ben Bachtler is an Applications Engineer out of LYONSCG's Chicago office. Specializing in front-end development, Ben builds high-quality sites that drive engagement and conversion for clients.