Search code examples
javascriptmodal-dialogz-index

How to make a modal appear without pushing the rest of the page down?

I want the modal to be at the center of the page and appear on top of the .main when I activate the .hidden class via javascript. But when I enable the .hidden class, the .main gets pushed down, even though I have given the .modal a higher z-index.

What am I doing wrong?

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;
       }
Solution

  • Instead of position relative, you have to use position absolute,

    simple add this css to your .modal class:

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