通过弹出容器显示的按钮？

Question

我有一个多功能的 Javascript 弹出按钮。但是，当弹出窗口出现时，单击后的按钮出现在弹出容器的顶部，而前面的按钮出现在容器的后面。如何使弹出容器在出现后通过所有按钮显示？HTML div 重复 4 次。//Popupfunction open() {  document.querySelectorAll(".button a").forEach((a) => {    a.parentElement.nextElementSibling.classList.remove("active");  });  this.parentElement.nextElementSibling.classList.add("active");  //popup is sibling of a's parent element }function close() {  this.parentElement.classList.remove("active"); // .popup}.container {  margin: 2em 2em;  display: grid;  grid-template-columns: repeat(2, 340px);  grid-gap: 55px;}.box {  display: flex;  align-items: center;  justify-content: center;  height: 170px;  position: relative;}.popup {  display: none;  visibility: hidden;  position: fixed;  left: 50%;  transform: translate(-50%, -50%);  width: 800px;  height: 600px;  padding: 50px;  background: #A6A6A6;}.active {  display: block;  top: 45%;  visibility: visible;  left: 50%;}<div class="container">  <h1>Lorem Ipsum</h1>  <br>  <div class="box button">    <a href="javascript:void(0);">Lorem Ipsum</a>  </div>  <div class="popup">    <h2>Lorem Ipsum</h2>    <video src="video.mov" controls></video>    <p>      Insert Text Here    </p>    <a href="javascript:void(0);" style="border: 2px solid; padding: 5px;">CLOSE</a>  </div></div>

Answer 1

CSS

.popup{

  z-index:99999;

}