Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is maximum & minimum value for z-index property in CSS?
In CSS, the z-index property is used to put one element on another. For example, we can create a stack of multiple HTML elements using CSS.
If you have ever used the z-index property, you must have seen its value like 9, 99, 999, 0, -9, -99999, etc. Have you ever asked yourself what could be the maximum value of the z-index, and have you researched about that on the internet? If not, go through this guide.
The maximum value of the z-index property is equal to 2147483647, and the minimum value is -2147483647. The number 2147483647 equals 232, the maximum value of the 32-bit binary number.
Note − The z-index will not work with the ‘static’ position. So, users need to change the position of the element.
Here, we will learn to use the z-index property using various examples.
Syntax
Users can follow the syntax below to use the z-index property to create a stack of elements.
.class_name {
z-index: -9;
}
In the above syntax, we have used the -9 as a value of the z-index, which will be applied to the HTML element containing the class ‘class_name’.
Example 1
In the example below, we have created three different div elements. We have used CSS to style the div elements. We have applied various heights and widths to the div elements. Also, we have set the background colour for every div element.
We have given a -9 z-index value to the first div, 2 to the second div, and 10 to the third div. In the output, users can observe the third div on the top of every div element, and the second is between the first and third div elements.
<html>
<head>
<style>
.div1 {
position: absolute;
width: 500px;
height: 350px;
background-color: aqua;
z-index: -9;
}
.div2 {
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
z-index: 2;
left: 50px;
top: 50px;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
left: 200px;
top: 200px;
background-color: black;
z-index: 10;
color: white;
}
</style>
</head>
<body>
<h2>Using the <i> Z-index property of CSS </i> to create a stack of elements</h2>
<div class = "div1">
<p> This is a first div. </p>
</div>
<div class = "div2">
<p> This is a second div. </p>
</div>
<div class = "div3">
<p> This is a third div. </p>
</div>
</body>
</html>
Example 2
In the example below, we have created two nested div elements and given different class names to both div elements. Also, we have set the ‘relative’ position for the first div element and the ‘absolute’ position for the second div element.
We have assigned -2147483647 as a value of the z-index of the first div element and 2147483647 as a value of the z-index of the second div element. It means we have assigned minimum and maximum values of the z-index to the div elements.
The div elements appear in the same order according to the z-index value in the output.
<html>
<head>
<style>
.div1 {
z-index: -2147483648;
background-color: blue;
width: 500px;
height: 400px;
position: relative;
}
.div2 {
z-index: 2147483647;
background-color: grey;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 50px;
font-size: 1rem;
}
</style>
</head>
<body>
<h3>Using the <i> maximum value of Z-index property of CSS </i> to create a stack of elements</h3>
<div class = "div1">
<div class = "div2">
<h3>This is the top most element</h3>
</div>
</div>
</body>
</html>
Users learned to use the z-index property with HTML elements in this tutorial. Also, users learned about the minimum and maximum value of the z-index, which is equal to the minimum and maximum value of the 32-bit binary number. Furthermore, whenever we use the z-index property with any element, we should change its position to ‘fixed’, ‘relative’ or ‘absolute’. Otherwise, it will not work.
2K+ Views
