CSS Z-index and Stacking Context : A Comprehensive Beginner’s Guide
Tags: webdev, css, beginners, tutorial
Published: 2023-12-20 09:07:46

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb1oegr9n1wwykn46pj1.png)
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

```css
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`.

```html
<div class="box box1"></div>
<div class="box box2"></div>
```
**Example1:**

```css
.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nci4u36xwois57bmtklz.png)
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**

```css
.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b7tnclhra2p4w7rmzug.png)
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**

```css
.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uanoz8vhzz3nho39u2uh.png)
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 Elements**
Elements 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).

### 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.

```html
<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:

```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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyfm8ryzj8ixxfycdi0.png)
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.

For more content like this, [click here](https://shefali.dev/blog).

You can also follow me on [X(Twitter)](https://twitter.com/Shefali__J) for getting daily tips on web development.

Keep Coding!!
<a href="https://www.buymeacoffee.com/devshefali" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>