将 div 堆叠在一起

Question

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

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

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

这里是 link 给 JS Fiddle: https://jsfiddle.net/x1L2jxnx/1/

Answer 1

我相信您将 H1 标签放在了 headerbg div 的外面。尝试将 h1 放在 headerbg div 中，如下所示：

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

Answer 2

你的绝对定位有问题。

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

用此代码替换 h1。

Answer 3

z-index 适用于定位的 absolute 或 relative 元素，只需为 h1 标签添加相对位置和 z-index 即可，

h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; position:relative; z-index:1 }

Updated jsfiddle

Answer 4

z-index 适用于 绝对定位元素 。

或者您可以简单地将 h1 嵌套在 headerbg 中。

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;}
.headerbg { background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; z-index:1}
h1 { position:absolute;left:10px;top:10px;z-index:2;font-size: 50px; border-bottom: 15px solid #e8cd54; }

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

Answer 5

添加 .headerbg div 只是为了背景效果并不是编写网络代码的理想方式。

我已从标记中删除了 .headerbg div 并添加了 css pseudo element 来解决该问题。像这样。

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;}
#directory::after {content: ''; background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; }
h1 { position: absolute; font-size: 50px; border-bottom: 15px solid #e8cd54; z-index: 1}

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

我还在 h1 元素中添加了位置。由于 parent div 是 position: relative 而 pseudo element 也是，所以我不得不给出 h1 以便我可以设置 z-index: 1 给它，正如@CBroe 在您的意见。

将 div 堆叠在一起

Stacking divs on top of each other

css

z-index

transparent

background-color