h1 elements above div using z-index

Question

I tried to place an h1 element above a div element using the css property z-index, but it's not working!

Here's my html:

<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>

The #headerblock has a black surface including some transparency. I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?

Thanks.

Answer 1

Gotta have a position on the h1.

h1 {
    position:relative;
    z-index: 500;
}

#header{
	background-image: url(img/head.jpg);
	background-size: 100%;
	height: 520px;
	width: 100%;
	top:49px;
	position: absolute;
	margin:0 auto;
	text-align:center;
}

#headerblock{
	background-color:#444444;
	opacity:0.7;
	filter:alpha(opacity=70);
	width:100%;
	position:absolute;
	height:200px;
}

<div id="header">
  <div id="headerblock"></div>
  <h1 style="color:white">This is my header text</h1>
</div>