css - 将 div 堆叠在一起

Question

我有一个非常简单的 CSS 问题，由于某种原因我无法自己回答。我有一个标题，我想为其添加黑色透明背景。这是我的 HTML:

<div id="directory">
 <div class="headerbg"></div>
 <h1>Rental Directory</h1>
</div>

.headerbg 具有黑色透明背景。但出于某种原因，H1 位于黑色背景之下。我尝试对背景或 h1 进行 z 索引，但我仍然无法让 H1 堆叠在背景之上。有人可以建议吗？谢谢。

这是 JS Fiddle 的链接:https://jsfiddle.net/x1L2jxnx/1/

Answer 1

你的绝对定位有问题。

h1 {
    font-size: 50px;
    border-bottom: 15px solid #e8cd54;
    width: 100%;
    position: absolute;
}

用这段代码替换 h1。