css - 覆盖的 z-index 问题

Question

我正在尝试添加叠加层，但它没有按预期工作。

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  width: 100%;
  height: 100%;
}
.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

<div class="center-div">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>
<div class="overlay">

</div>

我需要带有类 center-div 的 div 位于带有类覆盖的 div 之上..

这是怎么回事？

Answer 1

.center-div 已经在 .overlay 之上了!

尝试将 background-color 添加到 .center-div 以突出显示它。

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  width: 100%;
  height: 100%;
}
.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: white;
}

<div class="center-div">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>
<div class="overlay">

</div>