0

当我通过 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;
       }
4

1 回答 1

1

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

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

 position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
于 2021-08-14T08:36:14.973 回答