title: CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
body: <p>I have 3 levels of <code>div</code>:</p>
  
  <ul>
  <li><em>(In green below)</em> A top level <code>div</code> with <code>overflow: hidden</code>. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.</li>
  <li><em>(In red below)</em> Inside this, I have <code>div</code> with <code>position: relative</code>. The only use for this is for the next level.</li>
  <li><em>(In blue below)</em> Finally a <code>div</code> I take out of the flow with <code>position: absolute</code> but that I want positioned relative to the red <code>div</code> (not to the page).</li>
  </ul>
  
  <p>I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:</p>
  
  <p><img src="https://i.stack.imgur.com/iaky5.png" alt=""></p>
  
  <p>However, with the code below, I get:</p>
  
  <p><img src="https://i.stack.imgur.com/heZOW.png" alt=""></p>
  
  <p>And removing the <code>position: relative</code> on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:</p>
  
  <p><img src="https://i.stack.imgur.com/hkrpU.png" alt=""></p>
  
  <p>Is there a way to:</p>
  
  <ul>
  <li>Keep the <code>overflow: hidden</code> on the green box.</li>
  <li>Have the blue box expand beyond the green box and be positioned relative to red box?</li>
  </ul>
  
  <p>The full source:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#d1 {
    overflow: hidden;
    background: #efe;
    padding: 5px;
    width: 125px;
  }
  
  #d2 {
    position: relative;
    background: #fee;
    padding: 2px;
    width: 100px;
    height: 100px;
  }
  
  #d3 {
    position: absolute;
    top: 10px;
    background: #eef;
    padding: 2px;
    width: 75px;
    height: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;div id="d1" &gt;
    &lt;div id="d2" &gt;
      &lt;div id="d3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>