Блог

Главная - Вопросы по программированию - Как сделать так, чтобы модальный элемент отображался, не перемещая остальную часть страницы вниз?

Как сделать так, чтобы модальный элемент отображался, не перемещая остальную часть страницы вниз?

#javascript #modal-dialog #z-index

Вопрос:

Я хочу, чтобы модал находился в центре страницы и появлялся поверх .main, когда я активирую .hidden класс с помощью javascript. Но когда я включаю .hidden класс,. main опускается, даже несмотря на то, что я присвоил .modal более высокий z-индекс.

Что я делаю не так?

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

Ответ №1:

Вместо позиции relative вы должны использовать позицию absolute ,

просто добавьте этот css в свой .modal класс:

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

Комментарии:

1. Спасибо! Таким образом, относительная позиция перемещает элемент в пределах его собственного блока, в то время как абсолютная позиция перемещает элемент во всем теле страницы? Я также не совсем понял часть «преобразование:перевод(-50%,-50%);».

2. @boatus да, относительное положение перемещает элемент в пределах его собственного блока. в то время как абсолютная позиция перемещает элемент по всему телу страницы — до тех пор, пока он не найдет родителя с относительной позицией. Если у какого-либо родителя есть позиция относительно, то абсолют займет позицию относительного родителя, иначе тело. преобразование:перевод(-50,-50) просто для того, чтобы сделать div в центре, перевод принимает два значения x и y. Без этого ваш div не будет находиться в центре. Вы можете поиграть с ним, чтобы понять.

Метки: , ,