CSS模态框Z索引不起作用

Question

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

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

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

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

备用演示： http : //codepen.io/phpnetanel/pen/qEjJbo

Answer 1

问题是您将.overlay类添加到文档主体。 其余内容保留在文档主体中，因此位于顶部。 创建一个新的overlay div并将其添加到主体，然后将.overlay类应用于它。

这是一个工作示例： http : //codepen.io/anon/pen/EaXdKw

Answer 2

您正在将.overlay类应用于主体。 这不会像您期望的那样在内容上方创建覆盖。 您需要创建另一个元素。

这应该做您想要的。

Answer 3

您只需要在＃modal-box中将位置更改为相对位置即可代替绝对位置，即可使用