How Would You Make Two <Div>S Overlap

How would you make two divs overlap?

I might approach it like so (CSS and HTML):

html,body {  margin: 0px;}#logo {  position: absolute; /* Reposition logo from the natural layout */  left: 75px;  top: 0px;  width: 300px;  height: 200px;  z-index: 2;}#content {  margin-top: 100px; /* Provide buffer for logo */}#links {  height: 75px;  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */}

<div id="logo">  <img src="https://via.placeholder.com/200x100" /></div><div id="content">    <div id="links">dssdfsdfsdfsdf</div></div>

How to make a div overlap other

Using position: absolute; for the red div will cause it to "float", and then the blue div will start at the same location as the red one.

See code snippet:

#red {  height: 100px;  width: 20px;  border: 1px;  background: red;  position: absolute;}#blue {  height: 100px;  background: blue;}

<div id="red"></div><div id="blue"></div>

Two divs with position absolute overlapping with each other

It can't be done as such because position: absolute is designed to allow you to specify an absolute position for an element.

You can use either top or bottom with member elements to place it accordingly.

 <div id="div1" class="divcontent">
        <span>Some text</span>
    </div>
    <div id="div2" class="divcontent" style="bottom: 5px;">
        <span>Some other text</span>
    </div>

Check here

If you want it a bit generic, then create a CSS padding-bottom-05 { padding-bottom: 5px; }

then with html

<div id="div2" class="divcontent padding-bottom-05">

Two relative divs overlap each other

Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.

body {  padding: 0;  margin: 0;}.container {  width: 30%;  margin: 0 35%;  background: yellow;  position: relative;  height: 900px;}.p1_1 {  position: relative;  width: 50%;  height: 70%;  left: 0;  top: 10%;  background-color: green;}.p1_2 {  position: relative;  width: 100%;  height: 20%;  border: 1px solid blue;  top: 10%;}

<div class="container">  <div class="p1_1">    top box  </div>  <div class="p1_2">    hello box  </div></div>

How Would You Make Two <Div>S Overlap