CSS叠加后的内容位于叠加层下方

Question

我正在学习一些基本的CSS并试图制作叠加而不必在叠加div上设置高度。 （我希望叠加层仅覆盖.bg-img类中的背景图像）

但问题是叠加后的内容位于叠加层后面。 https://jsfiddle.net/vxbu07z9/10/

有人可以指出我失踪了吗？

HTML ：

＆＃13;

＆＃13;

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  color: #fff;
}

＆＃13;

<div class="bg-img">
  <div class="overlay"></div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这只是一个堆叠订单问题。

您可以通过将position:relative添加到.content div

来解决此问题

重置订单

＆＃13;

＆＃13;

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  color: #fff;
  position: relative;
}

＆＃13;

<div class="bg-img">
  <div class="overlay">

  </div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;

或更简单..

更改叠加层的z-index

＆＃13;

＆＃13;

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.content {
  color: #fff;
}

＆＃13;

<div class="bg-img">
  <div class="overlay"></div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;