Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我需要带有class center-div的div在class overlay之上。

这有什么问题？

Answer 1

正如其他人所说，.center-div高于.overflow

如果您将字体颜色更改为白色，则会看到它位于叠加层

之上

http://codepen.io/bryn/pen/GqEGzb

Answer 2

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

叠加的z-index问题

2 个答案: