How to make two divs overlap with CSS?

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.