Как показывать уведомление на всех разрешениях одинаково?

Question

[Сергей Рогов]

Добрый день. Как мне показывать всплывающее сообщение одинаково на всех экранах в правом верхнем углу ?
Делаю так:

.notys {
  position: fixed;
  text-align: center;
  left: 77%;
  top: 12%;
  width: 350px;
  z-index: 100000;
}

Но если для одного разрешения это будет выглядеть нормально, то для более маленького - уже не очень.
Нужно в медиа-запросах устанавливать параметры под каждое разрешение или есть какой-то нормальный способ ? Спасибо.

Answer 1

[Сергей delphinpro]

правый верхний угол => значит так и нужно писать

.notys {
  right: 0; // СПРАВА
  top: 0; // СВЕРХУ

  max-width: 90%; // На всякий случай ограничить процентами ширину.
}

Comments

[Алексей Уколов]

Думаю, для автора вопроса стоит добавить, что можно не только 0 указывать в качестве значения:

right: 23%;
top: 12%;

Общий смысл в том, чтобы отсчитывать процент не от левого угла, а от правого. А лучше даже не процент, а фиксированное значение в пикселях.

[imko]

Алексей Уколов, если так делать то обязательно указывать максимальный размер такой чтобы сумма смещения и размера не превышали 100%

[Алексей Уколов]

imko, конечно, Сергей delphinpro же об этом написал в ответе, я просто его немного дополнил.