Sometimes, we want to overlay one div over another div with CSS.
In this article, we’ll look at how to overlay one div over another div with CSS.
How to overlay one div over another div with CSS?
To overlay one div over another div with CSS, we use relative or absolute positioning.
For instance, we write
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://picsum.photos/30/30" height="20" width="32" />b
</div>
</div>
to add divs with an image inside.
Then we write
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
to make the divs with IDs navi and infoi overlay the container with position: absolute;.
We put the image above the rest of the elements with z-index: 10;.
Conclusion
To overlay one div over another div with CSS, we use relative or absolute positioning.
