title: html stack order
body: <p>Consider the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;HTML&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
  
    &lt;style type="text/css"&gt;
  
      h1 {
        font-size: 2em;
        font-family: Verdana;
        font-weight: bold;
      }
  
      p {
        border: 3px solid blue;
        margin-top: -50px;
        background-color: green;
        color: white;
      }
  
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;QUESTION&lt;/h1&gt;
    &lt;p&gt;The header text in the preceding h1 element is behind this
      paragraph's text (as expected), but on top of this paragraph's
      background and border (not expected).
    &lt;/p&gt; 
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>See the example here: <a href="http://jsfiddle.net/ZKHc9/" rel="nofollow">http://jsfiddle.net/ZKHc9/</a></p>
  
  <p>Why isn't the paragraph's background and border rendered on top of the header like the content is?</p>