html - 所有元素都在绝对覆盖 div 后面

Question

我有一个问题，我有一个绝对定位的 div，它充当背景图像顶部的颜色叠加层。

我遇到的问题是这个绝对定位的 div 之后的所有内容都放在它后面而不是在它上面。我不太明白发生了什么事。我知道它必须简单。

这是我当前的标记

#callout {
  background-image: url("http://i.imgur.com/FAHZdf9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 180px 0;
}

#callout h2 {
  color: #fff;
  text-align: center;
}

#callout p {
  padding: 0 50px;
  color: #fff
}

.bg-color {
  background-color: rgba(75, 78, 83, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

<div id="callout">
  <div class="bg-color"></div>
  <h2 class="text-center">Test Heading</h2>
  <p class="text-center">This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text.</p>
</div>

Answer 1

与其搞乱 z-index，不如将您的内容放在叠加层中:

#callout {
  background-image: url("http://i.imgur.com/FAHZdf9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  /* set the size you want this to be */
  height: 400px;
}

#callout h2 {
  color: #fff;
  text-align: center;
}

#callout p {
  padding: 0 50px;
  color: #fff
}

.bg-color {
  /* this does not need to be absolutely positioned*/
  width: 100%;
  height: 100%;
  background-color: rgba(75, 78, 83, 0.6);
  -webkit-transition: .5s ease;
  transition: .5s ease;
  
  /* you can vertical align using flex */
  display: flex;
  flex-direction:column;
  justify-content:center;
}

<div id="callout">
  <div class="bg-color">
    <h2 class="text-center">Test Heading</h2>
    <p class="text-center">This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text, This is test text.</p>
  </div>
</div>