how do i over put something in css?

let buttonOpen = document.querySelector(".button-open");
let buttonClose = document.querySelector(".button-close");
let modal = document.querySelector(".modal");

buttonOpen.addEventListener("click", () => {
  modal.classList.add("show-modal");
});

buttonClose.addEventListener("click", () => {
  modal.classList.remove("show-modal");
});

body {
  padding: 0;
  margin: 0;
}


/* for open the modal*/

#container {
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.modal {
  display: none;
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.show-modal {
  display: block;
  z-index: 1;
}

<!-- for open the modal -->
<div id="container">
  <button class="button-open">Open Modal</button>
</div>

<div class="modal">
  <div class="modal-content">
    <h3>Title a modal</h3>
    <button class="button-close">Close Modal</button>
  </div>
</div>