Почему блок с position:fixed двигается?

Question

[Spaceoddity]

https://codepen.io/nanto-work/pen/wNxgOZ
Какого лешего translate родителя влияет на положение блока с фиксированным позиционированием?

Answer 1

[Lynn «Кофеман»]

Это такая тонкость в спецификации.

https://stackoverflow.com/questions/15194313/trans...

Comments

[Spaceoddity]

Ага, спс, покурю. Довольно "опасное" это получается свойство.

Answer 2

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

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

Comments

[Spaceoddity]

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране

Fixed в принципе выводит элемент из потока. Для этого оно и задумывалось - чтобы не оглядываться на любых родителей.

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

Согласен, глупость написал.

[Михаил]

Spaceoddity, да выводит элемент из потока, вот только translate создает новый контекст(поток) относительно которого позиционируется fixed

Answer 3

[iBird Rose]

потому что translate применяется не только на заданный блок, но и для всех его потомков.
т.е. можешь это представить что ты для .img тоже прописал transform: translateY(-100%);