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