The z-index property in CSS is used to control the stacking order of positioned elements (i.e., elements
with a position value of relative, absolute, fixed, or sticky) within the same stacking context. It
determines which elements should appear in front of or behind other elements on the web page. The z-index
property takes an integer value, and elements with higher z-index values appear above those with lower
values.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: lightblue;
border: 2px solid #000;
}
.red-box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
.blue-box {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="red-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
Output:
