AtoZ CSS Quick Tip: Mastering Z-index

By Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for z-index here.

Welcome to our AtoZ CSS series! In this series, I’ve been exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on how to further utilize z-index.


Z is for z-index

Predictably, the final tip in this CSS series is all about z-index.

As discussed in the original screencast all about z-index, it’s a property used to control the ordering of layers in the document. There are a few complexities around stacking context (also covered in the video) but by and large, z-index is fairly limited in features.

However, there are always details to dive into when in pursuit of sharpening your skills and becoming a master of your craft. Let’s have a look at a couple of tips for working with z-index.

z-index only works for positioned elements

If you want to control the stacking order of elements, you can do so with z-index. But z-index will only take affect if the element also has a position value of absolute, relative or fixed.

Placing elements precisely with position is great for building up complex layouts or interesting UI patterns but it’s common to want to control stacking order without moving the element from its original place on the page.

If this is the case, you can just set position: relative but not provide any values for top, right, bottom or left. The element will remain in its original place on the page, the document flow won’t be interrupted and z-index values will take effect.

You can have negative z-index

Layering elements is often done to build up complex shapes or UI components. This often means layering elements on top of each other, with ever-increasing values of z-index. To place an element on a layer below another one, it just has to have a lower value of z-index but that lower value can be negative.

One area where this is useful is when using pseudo elements and wanting to position them behind the content of their parent element.

Due to the way stacking context works, a negative value of z-index is needed on any :before or :after elements if they are to be positioned behind the text content of their parent element.

Take a look at the following Codepen and experiment with various values of z-index.

See the Pen GNgvxO by SitePoint (@SitePoint) on CodePen.

Use steps of 100 for setting z-index

When dealing with z-index, it’s not uncommon to see code like this:

.modal {
  z-index: 99999;

This just looks hacky to me (and only gets worse when appended with !important). Seeing values like this is often symptomatic of a developer not understanding stacking context and trying to force one layer to be on top of another.

Instead of using arbitrary numbers like 9999 or 53 or 12, we can systemise our z-index scale and bring a bit more order to proceedings. This isn’t (just) because I have developer OCD. Honest.

Instead of using single digit increments for my z-index, I use increments of 100.

.layer-one   {z-index: 100;}
.layer-two   {z-index: 200;}
.layer-three {z-index: 300;}

I do this to keep things organized, but also to be mindful of the numerous different layers being used throughout a project. Another benefit is that if a new layer needs to be added between two others, there are 99 potential values to pick from in between.

When building a z-index system, this manual approach is pretty solid but can be made more flexible when combined with the powers of a pre-processor like Sass.

That’s all folks, this is the final post in our AtoZ CSS series! We hope you enjoyed it and learned plenty about the many features of CSS. To view all the entries in this series, click here.

Get the latest in Front-end, once a week, for free.