Z-index that is not working

I meet up with a problem, when I was trying to build a sidebar, this is where the content of the page was always on top of the mobile navbar, no matter how high the z-index of the sidebar is. This article will be helping a whole lot of people who are having z-index that is not working issue, to quickly fix and avoid wasting time looking for solutions.

What do we mean by z-index

When you want to set a stacking order of positioned element in the DOM, then the z-index service is needed. Below is how you can specify the z-index from your CSS with ease.

.element {

z-index: 1;

}

But in a case where your z-index is not set, the stacking order will definitely follow the main appearance of the elements in the DOM.

Why does my z-index that was set correctly not working?

Your z-index might not be working properly due to the fact that the z-index of an element depends on the several things, and when these things/criteria are not met, your z-index will not function. Below are some of the key reasons why your z-index is not effectively working.

If a ridiculous large z-index was previously set

Assuming you are working with an existing codebase which had the z-index of an element that is set to 999. The stacking order would definitely be affected, this is because elements with only a higher z-index can be displayed on top. With this, z-index of at least 1000 would be needed to be set so that it will work out.

Setting z-index on a static element

Basically, all elements have a static position. And it is important to know that the z-index works only on positioned elements such as absolute, sticky, fixed and relative. But if your z-index is set on an element of static position, then it will not work.

Parent element has a lower z-index

It is very essential to know that the z-index of an element will never go beyond the maximum z-index of its parent. This is an example below;

.child {

z-index: 3;

}

.element-to-cover {

z-index: 2;

}

.parent {

z-index: 1;

}

You are to set the z-index into 3, if you want to display the child element over the element to cover with the element. Doing this will definitely work, since there is a z-index higher than the element to cover, but in a situation where the parent element has a z-index of 1, then the child element will never appear above the element to cover.

Conclusion

Take note of the following points as stated above, about the Z-index that is not working.

For your z-index to function, set the position of the element.
Confirm that your element has a lower z-index value than that of the element you wish it appear over.
Your z-index of the parent element must not be lower than the z-index of your element, or else it will not work.