Sometimes, we want to make two divs overlap with CSS.
In this article, we’ll look at how to make two divs overlap with CSS.
How to make two divs overlap with CSS?
To make two divs overlap with CSS, we set the divs to have absolute position.
For instance, we write
<div id="logo">
<img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
<div id="links">dssdfsdfsdfsdf</div>
</div>
to add 2 divs.
Then we write
html,
body {
margin: 0px;
}
#logo {
position: absolute;
left: 75px;
top: 0px;
width: 300px;
height: 200px;
z-index: 2;
}
#content {
margin-top: 100px;
}
#links {
height: 75px;
margin-left: 400px;
}
to make the div with ID logo
have absolute position.
Conclusion
To make two divs overlap with CSS, we set the divs to have absolute position.