title: How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?
body: <p>I have a relatively -positioned div, which has <code>overflow: auto</code> set.  Inside that, I have a div which acts as a sort of drop-down menu.  I want the drop-down div to extend outside of the parent when it needs to, but it is being cropped, since the parent has <code>overflow: auto</code>.</p>
  
  <p>I realize that this is the correct behavior, but I am not sure how to achieve what I want.  Here is some example HTML that illustrates the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;"&gt;  
  
      &lt;div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>own div is contextually relevant to the other content in the <code>overflow: auto</code> div, so it makes sense to keep them together.  I suppose I could use javascript to move the drop-down div to another part of the DOM, but I'd rather not do that if I can avoid it.</p>