CSS for box-2

  <script>
    body *  { position: relative; }  # 0,0,0,1
     #outerbox  { margin: 0; padding: 0px; height: 200px; width: 300px; border: 1px black dashed; }  # 0,1,0,0
     #middlebox1  { display: block; margin: 20px; padding: 10px; border: 2px brown solid; background-color: gray; }  # 0,1,0,0
     #middlebox2  { display: block; margin: 20px; padding: 10px; padding-left: 40px; border: 2px brown solid; background-color: gray; }  # 0,1,0,0
     #innerbox  { margin: 0; padding: 0; background-color: yellow; height: 100px; width: 200px; }  # 0,1,0,0
  </script>
  

Page Content

<div id="outerbox" style="left:310px;">
 <div id="middlebox1">
  <div id="innerbox">
   <p style="padding:0; margin:0;">Relative Positioning and Shifted</p>
  </div>
 </div>
</div>
<div id="outerbox">
 <div id="middlebox2">
  <div id="innerbox">
  </div>
 </div>
</div>