title: Why does <input> inside an overflow <div> move itself when typing
body: <p>I have no idea whats going on here:</p>
  
  <pre><code>&lt;div style="position: absolute; width: 70px; height: 100px; left: 60px; top: 30px; overflow:hidden; background-color: rgb(255, 192, 192);"&gt;
    &lt;div style="position: absolute; top: 22px; left: 18px;"&gt;
      &lt;input type="text" placeholder="type here" style="width: 150px; height: 21px; overflow: hidden;"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7MX54/1/" rel="nofollow">http://jsfiddle.net/7MX54/1/</a></p>
  
  <p>Type in the textbox and it changes its position. No JS involved!
  Why is that? Which CSS rule to the rescue?</p>
  
  <p>Edit:
  Thanks for clarification. I changed the  width to 100% - good enough:
  <a href="http://jsfiddle.net/7MX54/2/" rel="nofollow">http://jsfiddle.net/7MX54/2/</a></p>