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;
}
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;
}
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
- You have to set the position of an element for the z-index to work
- Check to see if the element has a lower z-index value than the element you want it to appear over
- 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
Oldest comments (4)
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
Oh wow.....thanks a lot. I didn't actually know that
I used knowledge from this to explain z-index positioning to a friend. Thanks for this!!!
Nice!
Using
position: relative;
withz-index: 1;
will also create a stacking context.I recommend a blog post from Josh W Comeau