使用z-index在div上方的h1元素

Question

我试图使用css属性z-index将一个h1元素放在div元素上面,但它不起作用!

这是我的HTML:

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

#headerblock有黑色表面,包括一些透明度.我希望h1出现在#headerblock之上.正如我所提到的,z-index属性不起作用.有人有解决方案吗？或者至少是它不起作用的原因？

谢谢.

Answer 1

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

http://jsfiddle.net/y9cthv8r/1/