Simple Z-Index not working
===

I am trying to place my header `<h1>` over a div class named `light` which contains a background image named `light.png`. I have stacked them using `Z-index` and added `position:relative`, but still `<h1>` is placed under `<div class=light>`.

What am I doing wrong? Here is my code:

    <body>
    <div class="light"></div>
    <h1>sdfdsf</h1>
    </body>

And the CSS:

    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;
    }