The z-index property specifies the stack order of an element.
When elements are positioned, they can overlap other elements.
An element can have a positive or negative stack order
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Z-Index property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Z-Index</h1>
<div class="container">
<div class="black-box">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>
</body>
</html>
Style.css
* {
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
margin-bottom: 30px;
}
.container {
position: relative;
}
.black-box {
background-color: aqua;
position: relative;
border: 2px solid red;
width: 500px;
height: 100px;
z-index: 1;
}
.gray-box {
position: absolute;
background-color: blue;
width: 700px;
height: 100px;
top: 50px;
left: 50px;
z-index: 2;
}
.green-box {
position: absolute;
background-color: rgb(115, 255, 0);
width: 700px;
height: 100px;
top: -15px;
left: 270px;
z-index: 3;
}
Output:
Do leave your comments