CSS for box-4

  <script>
    #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  { position: relative; margin: 0; padding: 0; background-color: yellow; height: 100px; width: 200px; clip: rect(0,200px,100px,0); }  # 0,1,0,0
     #textbox  { position: absolute; height:100px; width: 400px; }  # 0,1,0,0
  </script>
  

Page Content

<div id="outerbox">
 <div id="middlebox1">
  <div id="innerbox">
   <p id="textbox" style="padding:0; margin:0;">Absolute Positioning insided a Relative Positioning &lt;div&gt; and blagh blagh blagh and more blagh blagh and a final blagh</p>
  </div>
 </div>
</div>
<div id="outerbox">
 <div id="middlebox2">
  <div id="innerbox">
   <p id="textbox" style="padding:0; margin:0;left:-200px;">Absolute Positioning insided a Relative Positioning &lt;div&gt; and blagh blagh blagh and more blagh blagh and a final blagh</p>
  </div>
 </div>
</div>