Table of contents

Introduction

Browser support

2.1.

Syntax

2.2.

Example

Property Values

3.1.

HTML Code

3.2.

CSS Code (without Z-index)

3.3.

Number Example

3.4.

Auto Example

3.5.

Inherit Example

3.6.

Initial Example

Stacking Context

4.1.

HTML Code

4.2.

CSS Code

Frequently Asked Questions

Key Takeaways

Last Updated: Mar 27, 2024

Z-Index and Stacking Contexts

Q: Question 1: What does negative Z-Index Mean?

Answer: When we tend to layer elements on top of one another, providing an ever-increasing Z-Index value, it can be stated as a negative Z Index. Also, it is entirely ok to have a negative Z-Index.

Q: Question 2: What is the default Z-Index?

Answer: The default value that is provided to the Z-Index property on every webpage is auto.

Q: Question 3: What is the use of Z-Index?

Answer: Every element of a webpage has a specific stack order, and the Z-Index represents this stacking order. I.e., using the Z-Index to displace the element along the z-axis, or we can also say in or out of our screen.

Q: Question 4: What is the highest possible value of the Z-Index?

Answer: The highest possible value of the Z-Index is ±2147483647.

Author Kabir Singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Every element of a webpage has a specific stack order, and the Z-Index represents this stacking order.

If one element has a greater stack order than the other, it is positioned in front of the individual element with a lower index and vice versa.

src: sudonull

Also, it is essential to note that the Z-Index can only and only be assigned to an already positioned element, i.e., it has positions like absolute, relative, fixed, etc.

Now, let’s have a look at the different types of browsers that support the Z-Index property:

Read About, Difference Between CSS and SCSS

Browser support

The table specifies the individual browser versions that support the Z-Index property completely.

Browser	Z-Index
Google Chrome	1.0
Microsoft Edge	4.0
Mozilla Firefox	3.0
Safari	1.0
Opera	4.0

Syntax

So if you wish to provide a Z-Index to your element, the below-mentioned syntax will help you tackle the obstacles.

{
z-index: number ;
z-index: auto ;
z-index: initial ;
z-index: inherit ;
}

Example

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Now there are different values of Z-Index that can be assigned. Let's have a look at the different property values.

Property Values

Value	Description
number	Hard Code the stack order of the element. Negative numbers are accepted.
auto	A default value that sets the Z-Index equivalent to parent.
inherit	Inherits the property from the parent elements.
initial	This directly sets the value of Z-Index to default.

Consider the default z-index example:

HTML Code

<!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>
</head>

<body>
  <div class="mycontainer">
  <div class="playZIndex">Play Z index</div>
  <div class="div1 common">1</div>
  <div class="div2 common">2</div>
  <div class="div3 common">3</div>
  <div class="div4 common">4</div>
  </div>
</body>

</html>

CSS Code (without Z-index)

.mycontainer{
  background: rgba(21, 88, 100, 0.2);
  height: 500px;
  width: 500px;
}

  .playZIndex {
  background: rgba(200, 87, 122);
}
  div {
  height: 210px;
  width: 210px;
  position: absolute;
  font: 40px bold;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
  .common{
  align-items: center;
}
  .div1 {
  top: 50px;
  left: 50px;
  background: rgba(255, 87, 51, 0.3);
}
  .div2 {
  top: 100px;
  left: 100px;
  background: rgba(255, 87, 51, 0.5);
}
  .div3 {
  top: 150px;
  left: 150px;
  background: rgba(255, 87, 51, 0.7);
}
  .div4 {
  top: 200px;
  left: 200px;
  background: rgba(255, 87, 51, 0.9);
}

Output (Default Z-index)

For further examples we will be changing the css of just Play Z index div

Number Example

.playZIndex {
background: rgba(200, 87, 122);
z-index: 1;
}

Since the value of z-index of “playZIndex” div is made 1 it comes in front of other div as the default value of z-index other divs was 0.

Output

Auto Example

.playZIndex {
background: rgba(200, 87, 122);
z-index: auto;
}

Note: z-index:auto means: "Sets the stack order equal to its parent". Since all the children of a parent by default start in the "z-layer 0" - relative to their parent, then, in-affect, z-index:auto and z-index:0 means the same thing: they will both be in the same "layer", and their stacking order will be according to the default stacking rules

Output

Inherit Example

.mycontainer {
  background: rgba(21, 88, 100, 0.2);
  height: 500px;
  width: 500px;
  z-index: 1;
}
.playZIndex {
  background: rgba(200, 87, 122);
  z-index: inherit;
}

Since the z-index inherit means that it will inherit the z-index of the parent. The parent “mycontainer” has a z-index of 1 hence playZindex will also have z-index of 1.

Output

Initial Example

.playZIndex {
background: rgba(200, 87, 122);
z-index: initial;
}

Output

Stacking Context

Source: davidmissioncodes

Stacking Context is a method to group elements together in a stack or a group that a typical parent represents. These elements are stacked together so that they can move up and down the z-axis together. This element contains a different set of layers, which depict the position of the grouped elements on the web page. To stack the elements, we use the z-index property and assign the value as per our needs.

We can add content in the root <html> tag. As this is a root element, nothing can go behind it. To add stuff behind the <body> tag, we can create a stacking context using the root element.

There are certain rules which are to be followed while stacking Context. Children of the contesting elements have to be ordered considering the listed rules from bottom to top:

Elements that have a negative stack value. (Example: elements with z-index as -1)
Elements that have the position level as static.
Then comes the elements which have the z-index as 0. (example: elements with z-index: auto/0)
At last, we have the positive stack elements with a z-index one or higher.

Let’s understand the concept better using this elaborative example,

HTML Code

<div class="black">
Positioned
</div>

<div class="blue">Positioned</div>

<div class="darkblue">Positioned</div>

CSS Code

.black, .blue {
position: absolute;
}

.black {
top: 30px;
left: 30px;
background: rgb(0,0,0);
}

.blue {
top: 60px;
left: 60px;
background: rgb(17, 138, 178);
}

.darkblue {
background: darkblue;
top:30px;
left:60px;
}

div {
height: 150px;
width: 150px;
color: white;
font-family: "Courier New", Courier, monospace;
text-align: right;
padding: 5px;
box-sizing: border-box;
}

OUTPUT

So getting a fair idea about the Z-Index and the Stacking Context, let's have a look at some Frequently asked questions and try finding the answer to our questions down there!

Frequently Asked Questions

Question 1: What does negative Z-Index Mean?

Answer: When we tend to layer elements on top of one another, providing an ever-increasing Z-Index value, it can be stated as a negative Z Index. Also, it is entirely ok to have a negative Z-Index.

Question 2: What is the default Z-Index?

Answer: The default value that is provided to the Z-Index property on every webpage is auto.

Question 3: What is the use of Z-Index?

Answer: Every element of a webpage has a specific stack order, and the Z-Index represents this stacking order. I.e., using the Z-Index to displace the element along the z-axis, or we can also say in or out of our screen.

Question 4: What is the highest possible value of the Z-Index?

Answer: The highest possible value of the Z-Index is ±2147483647.

Key Takeaways

In this article, we were able to find excellent insights into the Z-Index property of CSS that we can use to displace elements along the Z-axis in a webpage. Also, we were able to quickly understand the stacking contexts, which allow you to group elements together.

So, did you like this blog? And want to solve some interview questions for CSS? Here is a blog for you! Please have a look and also visit our platform Coding Ninjas Studio for more interview problems!

Happy Learning!

Live masterclass

Build Your Own ChatGPT-Powered Copilot using GenAI + RAG

by Saurav Prateek

18 Jul, 2025

01:30 PM

7+ registered

Build an AI Support Bot in 60 Mins with Google SDE3

by Saurav Prateek

14 Jul, 2025

01:30 PM

318+ registered

Get selected with Interview-ready GenAI project by Amazon SDE

by Anubhav Sinha

13 Jul, 2025

08:30 AM

639+ registered

PowerBI Dashboard Using T20 World Cup Data

by Megna Roy

15 Jul, 2025

01:30 PM

1325+ registered

Ace GenAI Tech Screenings - Get insider tips from MAANG SDE

by Shantanu Shubham

16 Jul, 2025

01:30 PM

148+ registered

Become MAANG Data Analyst: Python & AI for Data Visualization

by Alka Pandey

17 Jul, 2025

01:30 PM

134+ registered

Build Your Own ChatGPT-Powered Copilot using GenAI + RAG

by Saurav Prateek

18 Jul, 2025

01:30 PM

7+ registered

Build an AI Support Bot in 60 Mins with Google SDE3

by Saurav Prateek

14 Jul, 2025

01:30 PM

318+ registered

View more events