Why the two divs don't overlap as one when to position in css?

Question

Same div structure and css for tow divs,one is absolute position,other is relative position.

   
      
    #div1{
        width:120px;
        height:120px;
        border:1px solid red;
        position:relative;
        top:60px;
        left:70px;
        }
    #div2{
        width:120px;
        height:120px;
        border:1px solid black;
        position:absolute;
        top:60px;
        left:70px;
        }

<div id="div1">
</div>
<div id="div2">
</div>

Why the two divs can't overlap as just one?

Answer 1

That's because body margin is set to 8px as a default. div1 position is relative, so left: 70px means, actually 78px from the left edge. div2 position is absolute which means 70px from the left edge.

Once you set margin: 0 for the body, those 2 divs should be overlapped.

body {
  margin: 0;
}
#div1 {
  width: 120px;
  height: 120px;
  border: 1px solid red;
  position: relative;
  top: 60px;
  left: 70px;
}

#div2 {
  width: 120px;
  height: 120px;
  border: 1px solid black;
  position: absolute;
  top: 60px;
  left: 70px;
}

<div id="div1">
</div>
<div id="div2">
</div>