title: z-index not indexing properly
body: <p>Alright, so this code generates two blocks in a div. The top block should go over the bottom block because the top has a higher z-index, but when I give the bottom block a margin-top: -30px it goes above the top block.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div style="width: 300px; height: 90px; overflow: hidden;"&gt;
          &lt;div style="width:300px; height: 50px; z-index: 2; background-color: #ff0000;"&gt;
          &lt;/div&gt;
  
          &lt;div style="width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I get the top block to go above the bottom block?</p>