New update is available. Click here to update.

Z-Index and Stacking Contexts

Kabir Singh
Last Updated: May 13, 2022

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:

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;
    left0px;
    top0px;
    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{
        backgroundrgba(21, 88, 100, 0.2);
        height500px;
        width500px;
    }

    .playZIndex {
    backgroundrgba(200, 87, 122);
    }
    div {
      height210px;
      width210px;
      position: absolute;      
      font40px bold;
      font-family'Gill Sans''Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .common{
        align-items: center;
    }
    .div1 {
      top50px;
      left50px;
      backgroundrgba(255, 87, 51, 0.3);
    }
    .div2 {
      top100px;
      left100px;
      backgroundrgba(255, 87, 51, 0.5);
    }
    .div3 {
      top150px;
      left150px;
      backgroundrgba(255, 87, 51, 0.7);
    }
    .div4 {
      top200px;
      left200px;
      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);
    z-index1;
  }

 

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 {
    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

Output 

Inherit Example

  .mycontainer {
    backgroundrgba(21, 88, 100, 0.2);
    height500px;
    width500px;
    z-index1;
  }
  .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.

Output 

Initial Example

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

  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,

HTML Code

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

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

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

CSS Code

.black.blue {
  position: absolute;
}

.black {
  top30px;
  left30px;
  backgroundrgb(0,0,0);
}

.blue {
  top60px;
  left60px;
  backgroundrgb(17, 138, 178);
}

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


div {
  height150px;
  width150px;
  color: white;
  font-family"Courier New", Courier, monospace;
  text-align: right;
  padding5px;
  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 CodeStudio for more interview problems!

Happy Learning!

Was this article helpful ?
0 upvotes