4 reasons your z-index isn’t working (and how to fix it)

Last updated 78 days ago by Jessica Chan

css

Z-index is a CSS property that allows you to position elements in layers on top of one another. It’s super useful, and honestly a very important tool to know how to use in CSS.

Unfortunately, z-index is one of those properties that doesn’t always behave in an intuitive way. It seems simple at first- a higher z-index number means the element will be on top of elements with lower z-index numbers. But there are some additional rules that make things more complicated. And you can’t always fix things by setting the z-index to 999999! 😪

This article will explain in detail four of the most common reasons that z-index isn’t working for you, and exactly how you can fix it.

We’ll be going through some actual code examples and problem-solving them. After reading this article, you’ll be able to understand and avoid those common z-index pitfalls!

Let’s check out the first reason:

1. Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements.

In our first example, we have a relatively simple layout that includes 3 main elements:

  • An image of a cat
  • A white block with text
  • Another image of the same cat

Here’s the HTML markup for that:

```

Meow meow meow...

```

In this layout, we ideally want the white block of text to be on top of both cats.

To try to achieve this, we’ve added some negative margins to the CSS for both cat images, so that they overlap the white block a bit:

``` .cat-top { margin-bottom: -110px; }

.cat-bottom { float: right; margin-top: -120px; } ```

However, it looks like this:

The first cat is indeed positioned underneath the white content block, just like we want. But the second cat image is positioned on top of the block!

Why is this happening?

The reason for this behavior is due to the natural stacking order on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom.

Even if elements don’t have their z-index set, there is a rhyme and reason to which ones will be on top.

In our case, none of the elements have a z-index value. So their stacking order is determined by their order of appearance. According to this rule, elements that come later in the markup will be on top of elements that come before them.

(You can read more of the stacking order guidelines at Mozilla Developer Network here.)

In our example with the cats and the white block, they are obeying this rule. That’s why the first cat is underneath the white block element, and the white block is underneath the second cat.

Ok, stacking order is all well and good, but how do we fix the CSS so the second cat is underneath the white block?

Let’s look at the second reason:

2. The element doesn’t have its position set

One of the other guidelines that determine stacking order is if an element has its position set or not.

To set position for an element, add the CSS position property to anything other than static, like relative or absolute. (You can read more about it in this article that I wrote.)

According to this rule, positioned elements will display on top of unpositioned elements.

So setting the white block to be position: relative, and leaving the two cat elements unpositioned will put the white block on the top of the cats in the stacking order.

Read full Article