title: absolute div inside absolute div cuts off with respect to relative position
body: <p>I have 3 divs on top of each other having following css.</p>
  
  <pre><code>.d1 {
      position: relative;
      background-color: yellow;
      height: 50px;
      width: 100px;
      overflow: hidden;
  }
  
  .d2 {
      position: absolute;
      background-color: green;
      height: 25px;
      width: 50px;
  }
  
  .d3 {
      position: absolute;
      left: 83px;
  }
  </code></pre>
  
  <p>and the divs that have classes are as follows:</p>
  
  <pre><code>&lt;div class="d1"&gt;
    &lt;div class="d2"&gt;
      &lt;div class="d3"&gt;text&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and as a result I see content of d3 cut off because of overflow:hidden in d1.</p>
  
  <p><a href="https://i.stack.imgur.com/IdUqM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IdUqM.png" alt="enter image description here"></a></p>
  
  <p>How can I avoid cut off content of d3 without modifying d1?</p>