使用z-index将h1元素置于div上方

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 属性无法正常工作。有人有解决办法吗？或者至少能说一下为什么它不起作用吗？

谢谢。

- someuseryoudontknowthenameof

---

你能展示一下你的CSS吗？这将是在jsfiddle中拥有的很棒的东西。 - imjared

这很奇怪。在 jsfiddle 上，它按照我想要的方式工作。 - someuseryoudontknowthenameof

不好意思，它没有起作用，我会发布jsfiddle链接：http://jsfiddle.net/y9cthv8r/ - someuseryoudontknowthenameof

Answer 1

需要在h1上设置position属性。

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>

- imjared