2

Все содержимое страницы уменьшается, пропорционально изменению размера окна (написал скрипт, которые пересчитывает transform: scale у body) и все прекрасно уменьшает, но все плавающие фиксированные окна, жестко закрепляются в определенном положении документа. ТО есть fixed ведет себя не так как должен вести.

Можно ли как то исправить с помощью css без использования скрипта?

.child {
  display: block;
  position: fixed;
  top: 15px;
  left: 15px;
  padding: 25px;
  background: #5fba7d;
  color: #fff;
  font-size: 24px;
}
.paren {
  height: 5000px;
}
body {
  transform: scale(0.95);
}
<div class="paren">
  vrtvrtv
  <br>trvrvr
  <br>vrvrv
  <br>vrtvr
  <br>v
  <br>rfrv
  <br>r
  <br>v
  <br>r
  <br>v
  <br>r
  <br>v
  <br>v
  <br>
  <br>
  <div class="child">
    Это плавающий блок
  </div>
</div>

2
  • задайте fixed и уберите transform у body и увидите как себя fixed ведет.
    – engenes
    16 дек 2016 в 10:49
  • элемент должен быть зафиксирован в определенной части окна, а не документа
    – engenes
    16 дек 2016 в 10:50

2 ответа 2

0

Перевод ответа на аналогичный вопрос


CSS Transforms spec описывает данное поведение. Элементы с примененными трансформациями становятся контейнерами для внутренних элементов с фиксированной позицией. Поэтому position:fixed внутри элемента с какой-нибудь трансформацией больше не ведет себя как фиксированный.

Это будет работать при применении к одному элементу, т.е. элемент будет позиционирован как fixed и затем трансформирован.

4
  • не понял, есть ли возможность или нет, только с помощью css?
    – engenes
    16 дек 2016 в 10:55
  • @ЕвгенийШевцов, нет, это поведение согласно спецификации. Но можно просто вынести фиксированный элемент из контейнера с трансформацией
    – Grundy
    16 дек 2016 в 11:01
  • Да это да, но заказчик попросил, чтобы все элементы на экране уменьшались пропорционально уменьшению экрана. поэтому трансформацию применил к body. точнее ее высчитывает скрипт, в зависимости от того на сколько уменьшили экран от первоначального размера. ну а за body контейнер я уже вынести не могу)) это бы решило все мои проблемы)))
    – engenes
    16 дек 2016 в 11:04
  • @ЕвгенийШевцов, Тогда очевидно нужно скриптом и положение нужного элемента рассчитывать.
    – Grundy
    16 дек 2016 в 11:11
0

Задайте положение и, если нужно, размеры плавающих окон в относительных единицах, например:

  top: 5vw;
  left: 10vw;
  padding: 10vw;
1
  • только блок плавающий не стал
    – engenes
    16 дек 2016 в 10:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.