html - CSS叠加后的内容在叠加层下方

Question

我正在学习一些基本的 css，我正在尝试制作一个叠加层，而不必在叠加层上设置高度。 (我希望叠加层仅覆盖 .bg-img 类中的背景图像)

但问题是overlay之后的内容在overlay后面。 https://jsfiddle.net/vxbu07z9/10/

有人可以指出我遗漏了什么吗？

html:

.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;
}

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

Answer 1

这只是堆叠顺序问题。

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

来修复它

重新排序

.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;
}

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

或者更简单的..

改变叠加层的z-index

.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;
}

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