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中將位置更改為相對位置即可代替絕對位置，即可使用