Update appNew update is available. Click here to update.
Last Updated: Mar 24, 2023

Z-Index and Stacking Contexts

Author Kabir Singh


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.



Google Chrome


Microsoft Edge


Mozilla Firefox







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 ;


img {
    position: absolute;
    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




Hard Code the stack order of the element. Negative numbers are accepted.


A default value that sets the Z-Index equivalent to parent.


Inherits the property from the parent elements.


This directly sets the value of Z-Index to default.


Consider the default z-index example:


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <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>



CSS Code (without Z-index)

        backgroundrgba(21, 88, 100, 0.2);

    .playZIndex {
    backgroundrgba(200, 87, 122);
    div {
      position: absolute;      
      font40px bold;
      font-family'Gill Sans''Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        align-items: center;
    .div1 {
      backgroundrgba(255, 87, 51, 0.3);
    .div2 {
      backgroundrgba(255, 87, 51, 0.5);
    .div3 {
      backgroundrgba(255, 87, 51, 0.7);
    .div4 {
      backgroundrgba(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 {
    backgroundrgba(200, 87, 122);


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.


Auto Example

.playZIndex {
    backgroundrgba(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


Inherit Example

  .mycontainer {
    backgroundrgba(21, 88, 100, 0.2);
  .playZIndex {
    backgroundrgba(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.


Initial Example

.playZIndex {
    backgroundrgba(200, 87, 122);
    z-index: initial;


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:

  1. Elements that have a negative stack value. (Example: elements with z-index as -1)
  2. Elements that have the position level as static.
  3. Then comes the elements which have the z-index as 0. (example: elements with z-index: auto/0)
  4. 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,


<div class="black">

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

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

CSS Code

.black.blue {
  position: absolute;

.black {

.blue {
  backgroundrgb(17, 138, 178);

.darkblue {
  background: darkblue;

div {
  color: white;
  font-family"Courier New", Courier, monospace;
  text-align: right;
  box-sizing: border-box;


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 CodeStudio for more interview problems!

Happy Learning!

Previous article
Creating Border Animation using CSS
Next article
CSS Functions| Part 1
Codekaze-June23 India's Biggest Tech Hiring Challenge is LIVE!
Register Now
Go on top