title: Z-index input form
body: <p>I have this code:</p>
  
  <p><a href="http://jsfiddle.net/cmF4S/3/" rel="nofollow">http://jsfiddle.net/cmF4S/3/</a></p>
  
  <pre><code>&lt;div style="float: left; position: relative;"&gt;
  &lt;input type="text" placeholder="Search..." style="float: left; border-radius: 3px 3px 3px 3px; padding: 2px 4px; margin-top: 6px; margin-left: 8px; border: 1px solid rgb(143, 241, 255); height: 22px; font-size: 14px; font-family: Arial; width: 200px;" name="password" id="password"&gt;
  &lt;div style="background-color: red; left: 5px; right: 9939px; top: 30px; position: absolute; width: 100px; padding: 50px"&gt;
  s
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would the red box to be overwritten from the input form (e.g. input form is over the red box, that is partially hidden from the input form), however z-indexes won't work. What could i do?</p>
  
  <p>Thanks!</p>