title: overflow-x cutting off absolutely positioned child
body: <p>In <a href="http://jsbin.com/siwasaga/1/edit" rel="nofollow">this jsbin</a>, the absolutely positioned green <code>&lt;div&gt;</code> is being cut off at the top when I set <code>overflow-x: auto</code> on the parent element. Why? From my understanding, <code>overflow-y</code> is still <code>visible</code>, so the overflow should be visible.</p>
  
  <pre><code>#red {
    width: 300px;
    height: 100px;
    background: red;
    overflow-x: auto;
    position: relative;
    top: 30px;
  }
  #green {
    position: absolute;
    width: 10px;
    height: 10px;
    background: green;
    top: -5px;
  }
  
  &lt;div id="red"&gt;
    &lt;div id="green"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>