CSS - ограничение верхнего значения свойства до 0 при увеличении для диалогового окна

Question

В нашем пользовательском интерфейсе, когда мы нажимаем на ссылку, открывается диалоговое окно.

Теперь, если вы пытаетесь увеличить (нажимая ctrl и +) на странице.Диалог начинает обрезаться сверху, когда выходит из окна браузера и даже не прокручивается.

Причина

Когда мы увеличиваем, значение свойства css top продолжает уменьшаться, а когда оно становится отрицательным, оно продолжает усекать вид сверху диалога.

Диалог CSS

Это встроенный CSS элемента.

element.style {
   position: absolute;
   height: auto;
   width: 600px;
   display: block;
   top: 279px;
   left: 661px;
   z-index: 10002;
}

Возможные решения, которых я избегаю

1. В родительском CSS-классе добавьте свойство top как top: 0px !important, чтобы свойство top диалогового элемента не былоне сможет его переопределить.
2. Добавьте концепцию опроса и через каждую секунду продолжайте изменять свойство top элемента диалога.

Answer 1

Использование

top: 1rem;

Он будет автоматически настроен.

Когда мы увеличиваем наш браузер, он ведет себя как разные устройства.Например: если мы увеличиваем на уровне 175%, ширина нашего экрана составляет 732 пикселя.

Проверьте соотношение между масштабированием и шириной пикселя

Для получения дополнительной помощи, пожалуйста, поделитесь фрагментом кода:)