Z-index isn’t working? Let’s fix it… (2024)

In some projects that I worked on, I wanted to bring HTML elements to the front, or back behind other elements. Even though z-index helped me out in most cases, in some instances it didn’t behave the way I wanted, even I set z-index to 999!

Although z-index seems easy to work with, it can be tricky sometimes.

So from this article let’s find out some common reasons why z-index property not working and let’s learn how to use it properly.

What is z-index?

z-index is a CSS property that specifies the stacking order of HTML elements. Simply it will help you to place HTML elements in layers on top of each other.

An element with a greater z-index will always in front of an element with a lower z-index.

So by using z-index properly we can change the natural stacking order of a web page.

Natural Stacking Order

To understand this more clearly, let’s take an example.

As my first example I have a simple layout with 3 main elements; a red box, a yellow box and a blue box.

The stacking order of the elements is not noticeable until the elements are positioned to overlap. Therefore I add some negative margins for the 3 elements so that they overlap.

By looking at the example you can see that although all the elements are on the same floor, one element still be in front of the other one. And also there’s no z-index applied to the elements in the example.

Why is this happening?

It’s because of the natural stacking order on the web page. Basically, these guidelines decide which items are going to be on top and which will be on the bottom.

Elements are stacked in the following order according to their order of appearance when the z-index property is not specified on any element.

1. The background and borders of the root element
2. Descendant non-positioned blocks, in order of appearance in the HTML
3. Descendant positioned elements, in order of appearance in the HTML

(source: Stacking without the z-index property)

By using z-index on positioned elements, we can change the default stacking order. So let’s apply z-index to the above example and see what happens.

Now the red box has the highest z-index value and the yellow box has the lowest z-index value. Logically, you’d imagine now that the stacking order of these boxes will be reversed.

Oops!

The stacking order of the elements hasn’t reversed. But why?

1) Z-index only works on positioned elements

This is the most common reason why z-index is not working properly because z-index will only work on the elements whose position property is specifically set.

(A non-positioned element is an element with the default position value static. A positioned element is an element with any other position value. Examples of other values are: absolute, relative, sticky or fixed)

So to fix this we can apply the position property of the boxes to anything like absolute, relative or fixed.

Now let’s see how it looks.

Woohoo!

The stacking order of the boxes has reversed.

Now the next thing you might wonder is what happens when elements are not on the same level. Let’s deal with that now.

2) Parent element’s z-index applies to children as well

To understand this properly let’s put the blue box as a child element of the red box.

And let’s give the highest z-index to the blue box.

Now let’s see how it looks.

Although the blue box has the highest z-index the blue box overlay is underneath the yellow box.

This is because the blue box is a child element of the red box and its z-index will only have an effect inside its parent. So the z-index of a child element will not mean anything outside the parent element. Since the parent element of the blue box has a lower z-index, its children inherit the same z-index value which keeps the blue box positioned behind the yellow box.

There are several ways to solve this. Let’s see!

To fix this either you can remove the child element from its parent,

or

you can remove the position property of the parent so the z-index won’t affect its children.

Which renders the following:

Woohoo!

Let’s look at the next reason now.

3) CSS properties like opacity will put the element in a new stacking context

Let’s take the first example again and set the opacity of blue box as 0.99

Which gives you:

What is going on here !?

Even though many of the elements haven’t their position or z-index set, the blue box has moved on to the top of red and yellow boxes without even caring about the default stacking order.

You may not run into things like this often but the stacking contexts are not only created when z-index is added to an element. Several other properties also cause elements to form stacking contexts. Some examples are opacity and transform.

(You can read more about the elements that have special properties which cause them to form a new stacking context at Mozilla Developer Network here.)

The solution is to set the position property and the z-index of all the elements as the way to want to position them.

Woohoo! It works.

I believe now you know the most common reasons why z-index isn’t working for you. I hope this article has helped you to get a better idea about how to use z-index properly; specially for beginners.

Thank you for reading!

See you with another article.