An Alternative to Using z-index

2 minute read

Prerequisite

Understanding the fundamentals of HTML & CSS

Motivation

I’ve been a fan of z-index because it helps stacking HTML elements so easily. But I just learned that it’s not really a good practice to use it. If you don’t know what z-index is:

z-index

This is a CSS property that sets the stacking order of a positioned element and its children. The higher the number is, the higher the element is stacked.

Let’s look an example from MDN.

z-index

The Change my z-index is where we’re applying z-index. By default, it’s auto. But when we change it to 1:

z-index 1

See how Change my z-index is above the elements whose z-index: auto;.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #greeting {
        background-color: turquoise;
        font-size: 200px;
        position: absolute;
        width: 200px;
      }
      #how-are-you {
        background-color: tomato;
        font-size: 100px;
        position: absolute;
        top: 5rem;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="greeting">Hello</div>
    <div id="how-are-you">How are you</div>
    <img
      alt="Example"
      src="https://static.wikia.nocookie.net/despicableme/images/f/f6/Otto.png/revision/latest?cb=20200808003632"
    />
  </body>
</html>

A simple HTML doc that shows:

example's result

(BTW, I’m a huge fan of Minions. Make sure to check out Minions 2 that’ll be released in summer 2022. The picture is Otto, the new and first minion with braces.)

Notice How are you is above Hello. I’m not sure why img is in the lowest place by default (although the tag is after the two div’s), but I guess that’s how img’s are.

Let’s give Hello with #greeting some z-index:

<style>
	#greeting {
        background-color: turquoise;
        font-size: 200px;
        position: absolute;
        width: 200px;
        z-index: 1;
    }
    #how-are-you {
        background-color: tomato;
        font-size: 100px;
        position: absolute;
        top: 5rem;
        width: 100px;
    }
</style>

The only difference between this code and the last code segment is the z-index: 1; to #greeting.

Result:

hello with 1 z-index

See? z-index allows you to stack objects as you want. But this isn’t the best practice. If you think about it, if we start using z-index, the number will keep increasing, which isn’t something we really want to deal with manually. Then, how can we put an object above others without using z-index?

Alternative

I was googling to find some alternatives, but I didn’t see any. And this is what I just came up with:

The HTML elements declared later seem to be stacked above. Why don’t we just put the ones we want to place above after the elements we want to locate below?

So, instead of giving the div:first-child a z-index of 1:

<body>
    <div id="how-are-you">How are you</div>
    <div id="greeting">Hello</div>
    <img
      alt="Example"
      src="https://static.wikia.nocookie.net/despicableme/images/f/f6/Otto.png/revision/latest?cb=20200808003632"
    />
</body>

Just place Hello after How are you:

hello without z-index

Conclusion

Don’t use z-index. Instead, declare the tags of the elements you want to put above after the ones you want to put below.

Thanks for reading! And this post was actually quite hard to write; writing requires a lot of dedication. ;-;

Bye for now!

Leave a comment