What is maximum & minimum value for z-index property in CSS ?
Last Updated :
24 May, 2023
We have all seen that developers sometimes set z-index values to 999, 99999, etc to ensure that an element always remains on top.
In this article, we will discuss the maximum and minimum values for the CSS z-index property.
z-index: It is the CSS property that defines the stack level of positioned elements in the current stacking context i.e. elements with a smaller z-index are covered by elements with a larger z-index.
- The keyword auto or an <integer> is used to set the z-index property.
- Elements with any position besides static are affected by the z-index.
The maximum and minimum value for the z-index in most browsers is limited to a signed 32-bit value i.e. from −2147483648 to +2147483647.
Example: In this example, we will see the maximum and minimum values for the z-index.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.container {
position: relative;
}
.box1 {
background-color: green;
position: absolute;
z-index: -1;
height: 200px;
width: 200px;
}
.box2 {
background-color: blue;
position: absolute;
left: 50px;
z-index: 0;
height: 100px;
width: 300px;
}
.box3 {
background-color: red;
position: absolute;
left: 150px;
top: 50px;
z-index: 1;
height: 120px;
width: 250px;
}
</ style >
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
< p >max and min value of z-index</ p >
</ b >
< div class = 'container' >
< div class = 'box1' ></ div >
< div class = 'box2' ></ div >
< div class = 'box3' ></ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...