LAST UPDATED: AUGUST 5, 2021
How to Overlay One DIV Over Another DIV using CSS?
Sometimes we need to overlay one div to another in a webpage then we can do this easily by using CSS. In this tutorial, we will be learning about the properties used to overlay one div over another.
Using Z-index property
The z-index property of CSS can be used to overlay one div over another. Add z-index value to the div element with position attributes. The z-index determine the order in which div stacks.
Example: Overlay one div to another using z-index
The div with the z-index value will be placed above to another div. Here is the program to illustrate this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
width: 100px;
height: 100px;
position: relative;
}
.inner, .outer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: blue;
}
.inner {
z-index: 10;
background: green;
margin: 30px;
}
</style>
</head>
<body>
<h2> Overlay one div over another </h2>
<div class="container">
<div class="outer"></div>
<div class="inner"></div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Using Grid CSS
The Grid CSS can also be used to overlay one div over another. So use grid-area property to the div element and also add display: grid to the container class.
Example: Overlay one div over another using Grid CSS
In this program, we have used grid CSS property to overlay one div over another.
Conclusion
In this tutorial, we have used CSS properties to overlay one div over another. We can do so using Z-index or grid-area properties to do so.
