• The z-index property in CSS is used to control the stacking order of elements on the web page.
• This is especially important when elements are positioned using properties like position: absolute, relative, or fixed.
• An element with a higher z-index value will appear in front of an element with a lower z-index value

z-index.html

<div class="z-container">
    <div class="red-box">z-index:1;</div>
    <div class="green-box">z-index:2;</div>
    <div class="yellow-box">z-index:3;</div>
</div>

style.css

.z-container {
	width: 400px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	margin: 100px auto;
}

.red-box {
	background-color: red;
	position: absolute;
	width: 200px;
	height: 200px;
	z-index: 1;
	padding: 10px;

}

.green-box {
	background-color: #0bc50b;
	position: absolute;
	width: 200px;
	height: 200px;
	z-index: 2;
	top: 35px;
	left: 25px;
	padding: 10px;
}

.yellow-box {
	background-color: yellow;
	position: absolute;
	width: 200px;
	height: 200px;
	z-index: 3;
	top: 70px;
	left: 50px;
	padding: 10px;
}

Output: