javascript - 如何在不向下推页面其余部分的情况下显示模式？

Question

当我通过 javascript 激活 .hidden 类时，我希望模式位于页面的中心并出现在 .main 的顶部。但是当我启用 .hidden 类时，.main 会被下推，即使我给了 .modal 更高的 z-index。

我究竟做错了什么？

https://codepen.io/boatus/pen/abWxzwL

           .modal {
          background-color: rgb(162, 154, 170);
          width: 70vw;
          height: 70vh;
           margin: auto;
         position: relative;
        z-index: 2;
         } 

          .main {
            display: flex;
           justify-content: center;
            margin: 40px;
          gap: 100px;
         z-index: 1;
       }

Answer 1

而不是 position relative，你必须使用 position absolute，

简单地将这个 css 添加到你的.modal类中：

 position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);