Home

A Beginner's Guide to Z-Index

Pratham

The z-index is a powerful yet confusing concept of CSS. Let's make it easy!

z-index is a CSS property that controls stacking order of elements along a z-axis. Let's first take a look at what the z-axis is, and then get you started with a few tips to help you solve situations that tend to trip up developers.

The Z-Axis

Imagine a hypothetical line starting from your eye to screen. That is z-axis. It works like this:

Z-Index: Z-Axis Sketch

⭐ Tip #1: Position Rule Required

The biggest thing that confuses developers is that z-index only works on positioned elements. You must specify the position rule (relative, absolute, sticky, or fixed) if you want to arrange an element using z-index.

/* bad - z-index will not work without position */
.element {
z-index: 1;
}

/* good - z-index works when position is applied */
.element {
position: relative;
z-index: 1;
}

⭐ Tip #2: Understanding Default Behavior

By default, all elements have a z-index of 0. When z-index rules are the same and two elements collide, an element written father down your HTML code will be stacked on top.

Take two sibling elements, a and b, where b is written after a:

<!-- #b will have stacking precedence if no z-index is specified -->
<div id="a">...</div>
<div id="b">...</div>

By default, if both of these elements are positioned in such a way that they overlap, but neither has a z-index, b will be stacked on top of a.

⭐ Tip #3: Working with Nested Elements

Using the example with a and b above, let's say b is intentionally stacked on a. And let's say a has a child, c, which we give a z-index of 100. The HTML might look like this:

<div id="a">
<div id="c"></div>
</div>
<div id="b">...</div>

And the corresponding CSS:

#a {
position: absolute;
z-index: 1;
}

#b {
position: absolute;
z-index: 2;
}

#c {
position: absolute;
z-index: 100;
}

In this case, the child(ren) of a (c) can never be stacked above b. This is how it plays out on the screen:

Z-Index: Working with Nested Elements

Test Drive

Here is some test code you can play around with for better understanding.


This content was originally sourced from this tweet by @Prathkum. Feel free to add to the Twitter thread with question or comments.

Let's Connect

Keep Reading

WTF is CSS?

A brief description of CSS, before suggesting a couple free courses.

Jun 25, 2020

Everything You Need to Know about CSS Position Property

Dive deep into CSS position with real examples.

Pratham Aug 19, 2021

CSS Animations Quick Start Guide

Learn the basics of CSS animations to catch the attention of your website visitors.

Pratham Jun 24, 2021