Question

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

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

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

以下是JS Fiddle的链接：https://jsfiddle.net/x1L2jxnx/1/

Answer 1

这是您绝对定位的问题。

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

用此代码替换h1。

Answer 2

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

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

Updated jsfiddle

Answer 3

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 4

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

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

Answer 5

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

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

＆＃13;

#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}

＆＃13;

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

＆＃13;

我还在h1元素中添加了位置。由于parent div为position: relative且pseudo element也是如此，因此我必须将h1设为z-index: 1，正如@CBroe所解释的那样你的意见。

将div叠加在一起

5 个答案: