CSS Z-index concept is based on the stack order of a box and its position value might be one of absolute, fixed, or relative. Basically, it comes into action when elements also occupy the z-axis. An element having a higher z-index value always lies on another box having a lower z-index value. The z-index value might be an integer value.
.box{
position: relative;
left: 80px;
top: -150px;
z-index: -2;
}
Note:The z-index value is used to decide the element position inside the stack. The element having a higher z-index value will be at the top of the stack while the element having a lower z-index value will be at the bottom of the stack.
Source Code
.box{
position: relative;
left: 80px;
top: -150px;
z-index: -2;
}
div{
width: 150px;
height: 150px;
}
.firstBox{
background-color: orange;
color: white;
}
.secondBox{
background-color: purple;
color: white;
}
Code Explanation
Note:In this example, the CSS z-index concept is described. The HTML element having a higher z-index value will be at the top of the stack.
