title: Simple Z-Index not working
body: <p>I am trying to place my header <code>&lt;h1&gt;</code> over a div class named <code>light</code> which contains a background image named <code>light.png</code>. I have stacked them using <code>Z-index</code> and added <code>position:relative</code>, but still <code>&lt;h1&gt;</code> is not placed over <code>&lt;div class=light&gt;</code>.</p>
  
  <p>What am I doing wrong? Here is my <strong>html code</strong>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="light"&gt;&lt;/div&gt;
      &lt;h1&gt;sdfdsf&lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>css code:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background-image: url(images/bg.jpg);
      background-repeat: repeat;
      z-index:1;
  }
  .light {
      background-image: url(images/light.png);
      margin-left:auto;
      margin-right:auto;
      z-index:2;
      width:763px;
      height:566px;
      position:relative;
  }
  h1 {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 48px;
      color: rgba(255,255,255,1);
      position:relative;
      z-index:5;
  }
  </code></pre>