Css模态框z索引不起作用

Question

我试图构建简单的模态，由于某种原因，z-index不起作用。这有什么问题？

＆＃13;

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  var aTag = document.querySelector('.img-box');

  aTag.addEventListener('click', function(e) {
    e.preventDefault();

    document.body.classList.add('overlay');

    var img = document.createElement('img'),
        modalBox = document.getElementById('modal-box')

    img.src = this.href;

    modalBox.appendChild(img);

  })
});

＆＃13;

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}
#modal-box {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#modal-box img {
  max-width: 100%;
}

＆＃13;

<a href="http://placehold.it/400x200" class="img-box">
  <img src="http://placehold.it/100x100" />
</a>

<div id="modal-box"></div>

＆＃13;

＆＃13;

＆＃13;

替代演示：http://codepen.io/phpnetanel/pen/qEjJbo

Answer 1

问题是您将.overlay类添加到文档正文中。其余内容保存在文档正文中，因此它保持在顶部。创建一个新的叠加div并将其添加到正文并将.overlay类应用于它。

以下是一个有效的例子：http://codepen.io/anon/pen/EaXdKw

Answer 2

您正在将.overlay课程应用于正文。这不会像您期望的那样在内容之上创建叠加层。您需要创建另一个元素。

This应该做你想做的事。

Answer 3

你只需要在＃modal-box中将位置改为绝对值而不是绝对值，它会起作用