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

Question

我试图放置一个 h1 上方的元素div 使用 css 属性的元素 z-index ，但它不起作用!

这是我的 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;
}

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