@RomanSS

Объясните как работает position: fixed; когда используется transform?

Не могу понять, как работает position fixed. По документации он прикрепляет слой к окну браузера, но если использовать transform, то уже работа меняется, и он прикрепляется уже к слою, а не к окну браузера (поведение становится как у position: absolute, но по ряду фактов это все же fixed).
Знаю, что в момент использования transform: translateZ(0); слой переходит в другой режим стекирования, это связано скорее всего с этим, кто может объяснить это поведение?

Пример https://codepen.io/anon/pen/LdWmJw

Код

<style>
.parent {
 
  width: 30%;
  background: blue;
  height: 2500px;
  float: left;
}
.child {
  position: fixed;
  width: 50px;
  height: 50px;
   top: 30px;
  left: 50px;
  background: red;
}


.parent2 {
  width: 30%;
  background: green;
  height: 2500px;
  transform: translateZ(0);
  float: left;
}
.child2 {
  position: fixed;
  top: 30px;
  right: 50px;
  width: 50px;
  height: 50px;
  background: red;
}
</style>

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent2">
  <div class="child2"></div>
</div>
  • Вопрос задан
  • 4530 просмотров
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
кто может объяснить это поведение?

Спецификация может объяснить:

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.


Добавили элементу transform - все его потомки с position:fixed начинают отсчитывать свое расположение от него. Они начинают считать его своим "внешним блоком", а не вьюпорт или страницу, как это происходит по умолчанию для position:fixed.
Ответ написан
@Blissful
Можно как-нибудь изменить это поведение? Чтобы fixed рассчитывался от viewport, не смотря на transform родителя?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы