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="" /></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 id="div2" class="divcontent" style="bottom: 5px;">
<span>Some other text</span>

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.