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

Question

我有一个多功能 Javascript 弹出按钮。但是，当弹出窗口出现时，单击后的按钮出现在弹出容器的顶部，而前一个按钮出现在容器的后面。如何使弹出容器在出现后通过所有按钮显示？ HTML div 重复4次。

//Popup
function 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;
}

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

Buttons displaying through a popup container?

html

javascript

css

popup

button