CSS Z-index and Stacking Context

CSS Z-index and Stacking Context : A Comprehensive Beginner’s Guide

by

In this post, you’ll learn about CSS Z-index and Stacking Context with some examples.

Let’s get started!🚀

What is z-index?

The z-index property is used to determine the order of elements in the stack, which means which element will be on top of which element.

In your web page, if you want one element to be on top of the others, then you can use the z-index property. It helps you control the order in which elements are layered on the screen.

For this to work, you give value to the elements. An element with a higher value will always be on top of an element with a lower value.

Here, on top of the other element means one element will be on top of the other in the z-axis or simply will be in front of the screen.

CSS z-index

Don’t worry if you don’t understand the above theoretical part. I’ll explain it with examples to make it clear for you.

Note: z-index property will only work on positioned elements (position: relative, position: absolute, position: fixed, or position: sticky) and flex items. It will not work on static-positioned elements.

Syntax for z-index

z-index: auto|number|initial|inherit;

Here,

  • auto – Sets the stack order of the element equal to its parent element. This is the default value.
  • number – You give it a number (like 0, 1 etc.). Negative numbers are allowed.
  • initial – Sets the value to its default value.
  • inherit – Inherits this property from its parent element.

z-index Values

The z-index values can be positive, negative, or zero. Elements with higher z-index values will always be on top of the elements with lower z-index values.

What if I give two elements the same z-index value?

If two elements have the same z-index value, then the one that comes later in the HTML code will be on top.

Now, let’s take a look at some examples to understand z-index.

<div class="box box1"></div>
<div class="box box2"></div>

Example1:

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}
.box1 {
  background-color: red;
  z-index: 2;
  top: 20px;
  left: 20px;
}
.box2 {
  background-color: blue;
  z-index: 1;
}

Output:

CSS z-index

Here, .box1 or red box will be in front or on top because it has a higher z-index value.

Example2: With the same z-index values

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}
.box1 {
  background-color: red;
  z-index: 2;
  top: 20px;
  left: 20px;
}
.box2 {
  background-color: blue;
  z-index: 2;
}

Output:

CSS z-index

Here, the z-index value of both the boxes are the same, so the blue box (.box2) will be on top, because it comes later in the HTML code.

Example3: With negative z-index values

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}
.box1 {
  background-color: red;
  z-index: -3;
  top: 20px;
  left: 20px;
}
.box2 {
  background-color: blue;
  z-index: -5;
}

Output:

CSS z-index

Here, .box1 or red box will be on top because it has a higher z-index value.

Stacking Context

Let’s understand the concept of stacking context. Imagine it as a three-dimensional arrangement of HTML elements along the z-axis. Each stacking context operates independently, and the z-index values of elements are only compared within the same stacking context.

To put it simply, think of a stacking context as a container for certain HTML elements. Elements within the same stacking context follow a set of rules for how they should be layered along the z-axis. This stacking order is determined by the z-index property.

Creating a Stacking Context

If any element is in the following scenarios, then a stacking context will be formed.

  1. Root Element
    The root element (<html>) is always a stacking context. This provides a baseline for stacking on the entire page.
  2. Positioned
    ElementsElements with a position value other than static (it’s the default value) and a z-index value other than auto (it’s the default value) creates its own stacking context.
  3. Flex Containers and Grid Containers
    Elements with display: flex or display: grid properties and a z-index value other than auto creates a stacking context.
  4. Opacity Less than 1
    Elements who has an opacity value less than 1 creates a stacking context.
  5. Transform or Filter Property
    Elements with a transform or filter property other than none creates a stacking context.

You can read about more such scenarios here.

But Why Does Stacking Context Matter?

Stacking context matters because it defines the rules for how elements are layered in the three-dimensional arrangement of elements. Elements within different stacking contexts don’t interfere with each other’s stacking order.

Let’s jump into an example to make it more clear.

<div class="context">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
   <div class="box box3">Box 3</div>
</div>

<div class="box no-context"></div>

CSS:

.context {
  position: relative; /* Creating a stacking context using position relative */
  width: 200px;
  height: 200px;
  background-color: #c9c9c9;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  color: white;
  text-align: center;
}
.box1 {
  top: 20px;
  left: 20px;
  z-index: 2;
  background-color: rgb(211, 74, 74);
}
.box2 {
  top: 50px;
  left: 50px;
  z-index: 1;
  background-color: rgb(60, 60, 179);
}
.box3 {
  top: 80px;
  left: 80px;
  background-color: rgb(45, 145, 45);
}
.no-context {
  width: 150px;
  height: 150px;
  background-color: #7397af;
  margin-top: 30px;
  z-index: 3; /*z-index without a stacking context */
}

In the above example,

  • The .context element has property position: relative; so it creates a stacking context.
  • We have three elements with the class names .box1, .box2 and .box3 inside the .context element.
  • The .box1 and .box2 elements have positioned values, top and left, and .box3 element has the default position.
  • The .no-context element outside the .context element does not have a stacking context.
  • The .no-context element has a higher z-index value, but it won’t affect the stacking order inside the .context element because it’s outside the stacking context of .context.

Output:

CSS z-index

In simple words, stacking context is a container of certain HTML elements and the value of the z-index of elements outside the stacking context does not affect the elements inside the stacking context.

That’s all for today.

I hope it was helpful.

Thanks for reading.

Check out CSS Scan, a browser extension that lets you extract the code for any CSS element of all the websites across the internet. Click here to get a 25% discount on CSS Scan.

For more content like this, click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!

Leave a Comment