DEV Community 👩‍💻👨‍💻

Cover image for Why your z-index isn't working
Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

Why your z-index isn't working

I was building a sidebar recently, and I encountered a bug where the content of the page was always on top of the mobile navbar no matter how high I raised the z-index of the sidebar. This took me a while to figure out and I'm writing this article hoping that someone out there won't waste a lot of time like I did trying to solve the bug.

What is z-index

z-index is a CSS property that allows you to set the stacking order of positioned elements in the DOM. Here's how to specify the z-index from your CSS:

.element {
  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

When no z-index is set, the stacking order follows the appearance
of the elements in the DOM.

I set the z-index correctly, so why doesn't it work?

The z-index of an element depends on a number of things, and usually, when these conditions aren't met, the z-index of your element would most likely not take effect.

Here are some of the reasons why your z-index doesn't work;

You set z-index on a static element

By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.

A ridiculously large z-index was previously set

You might be working on an existing codebase that had the z-index of an element set to 999 (for example). This would affect the stacking order as only an element with a higher z-index can show on top. So you would need to set the z-index of at least 1000 for the z-index to work. Also, it's good practice to avoid setting large z-index values, that way you can avoid issues such as this.

The parent element has a lower z-index

The z-index of an element can only go as far as the maximum z-index of its parent (it cannot appear in a higher stacking context than its parent). Take for example;

.child {
  z-index: 3;
}

.element-to-cover {
  z-index: 2;
}

.parent {
  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

In this case, you want to display the child element over the element-to-cover element so you set the z-index to 3. This should work since it has a z-index higher than the element-to-cover, but because the parent element has a z-index of 1, the child element would not appear above the element-to-cover

Summary

  1. You have to set the position of an element for the z-index to work
  2. Check to see if the element has a lower z-index value than the element you want it to appear over
  3. The z-index won't work if the parent element has a z-index lower than the z-index of your element

This article was originally post on my blog

Top comments (4)

Collapse
 
theodorusclarence profile image
Theodorus Clarence

Nice!

Using position: relative; with z-index: 1; will also create a stacking context.

I recommend a blog post from Josh W Comeau

Collapse
 
afif profile image
Temani Afif

note than elements that are child of flexbox container or grid container (which is something common nowadays) don't require position to use z-index

Collapse
 
ibn_abubakre profile image
Abdulqudus Abubakre Author

Oh wow.....thanks a lot. I didn't actually know that

Collapse
 
ayoazeez26 profile image
Ayoazeez26

I used knowledge from this to explain z-index positioning to a friend. Thanks for this!!!

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠