title: If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?
body: <p>If the child is <code>position:absolute</code>, the parent is <code>overflow:hidden</code>, and the parent is <code>position:static</code>, the child still overflows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="overflow:hidden;height:100px;border:2px solid red;"&gt;
    &lt;div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the parent has a position other than <code>static</code>, the child no longer overflows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="overflow:hidden;height:100px;border:2px solid red;position:relative;"&gt;
    &lt;div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why does this occur? What is this behavior called?</p>
  
  <p>I'm using Chrome, is this behavior consistent across browsers?</p>