Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is maximum & minimum value for z-index property in CSS?
In CSS, the z-index property controls the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating a layered effect.
The z-index property has specific limits: the maximum value is 2147483647 and the minimum value is -2147483647. These numbers represent the maximum and minimum values of a 32-bit signed integer.
Note The z-index property only works with positioned elements (relative, absolute, fixed, or sticky). It has no effect on elements with static positioning.
Syntax
selector {
z-index: value;
}
Possible Values
| Value | Description |
|---|---|
integer |
Any integer between -2147483647 and 2147483647 |
auto |
Default value, establishes new stacking context |
Example 1: Basic Z-Index Stacking
The following example demonstrates three overlapping div elements with different z-index values
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 400px;
}
.div1 {
position: absolute;
width: 300px;
height: 200px;
background-color: aqua;
z-index: 1;
top: 0;
left: 0;
}
.div2 {
position: absolute;
width: 300px;
height: 200px;
background-color: pink;
z-index: 5;
top: 50px;
left: 50px;
}
.div3 {
position: absolute;
width: 300px;
height: 200px;
background-color: lightgreen;
z-index: 10;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">Z-index: 1</div>
<div class="div2">Z-index: 5</div>
<div class="div3">Z-index: 10</div>
</div>
</body>
</html>
Three overlapping colored rectangles appear with the green box (z-index: 10) on top, pink box (z-index: 5) in middle, and aqua box (z-index: 1) at the bottom.
Example 2: Maximum and Minimum Z-Index Values
This example uses the extreme z-index values to demonstrate the maximum stacking limits
<!DOCTYPE html>
<html>
<head>
<style>
.bottom-element {
position: absolute;
width: 400px;
height: 300px;
background-color: navy;
color: white;
z-index: -2147483647;
padding: 20px;
}
.top-element {
position: absolute;
width: 300px;
height: 200px;
background-color: orange;
z-index: 2147483647;
top: 50px;
left: 50px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bottom-element">
Minimum z-index: -2147483647
<div class="top-element">
Maximum z-index: 2147483647
</div>
</div>
</body>
</html>
A navy blue box appears as background with an orange box positioned on top of it, demonstrating the extreme z-index values working correctly.
Key Points
- Z-index only affects positioned elements (not static)
- Higher values appear above lower values
- Negative values send elements behind the normal flow
- The limits are based on 32-bit signed integer constraints
Conclusion
The z-index property accepts integer values from -2147483647 to 2147483647. Remember that z-index only works with positioned elements and creates stacking contexts that determine the layering order of overlapping elements.
3K+ Views
