我有一個多功能的 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>