title: Absolute positioning with percentages giving unexpected results
body: <p>Please consider <a href="http://jsfiddle.net/YkAPn/" rel="noreferrer">this jsfiddle</a>, containing this html code:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="item"&gt;TEST&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And some CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#container {
    border: 1px solid red;
    height: 100px;
    width: 100px;
  }
  
  #item {
    border: 1px dashed purple;
    position: absolute;
    left: 50%;
  }
  </code></pre>
  
  <p>The results surprise me. Looking at the <a href="http://www.w3.org/TR/CSS2/visuren.html#position-props" rel="noreferrer">W3 positioning props</a> I'd expect the <code>#item</code> to have its left value at 50% of the "containing block": the <code>#container</code>. However, it seems to be at 50% of the entire page, not just the <a href="http://www.w3.org/TR/CSS2/visuren.html#containing-block" rel="noreferrer">containing block</a>. Even more surprising: if I tell the overflow of the container to stay hidden the "TEST" will still be there.</p>
  
  <p>All major browsers (including IE9) seem to exhibit the same behavior, so my expectations are probably incorrect. <strong><em>The question then is</em></strong>: <em>what part of the spec explains this behavior, if any?</em></p>