Как динамически изменить отступ?

Question

[dhelfy]

У меня есть картинка, также у меня есть блок, финальный результат должен быть как на скрине. В статике нужный отступ сделать не трудно, но вот если начать изменять размер вьюпорта, то блок "ползёт". Как это можно изменить и так сказать зафиксировать его на определенной позиции вне зависимости от размера вьюпорта?

https://codepen.io/dhelfy/pen/dyZEWQz?editors=1100

Comments

[Вадим]

Ну ответ будто бы сам вытекает из вопроса, не находите?

Как это можно изменить и так сказать зафиксировать его на определенной позиции вне зависимости от размера вьюпорта

Позиционировать относительно НЕ вьюпорта.
А общего с картинкой контейнера.

Answer 1

[Ankhena]

https://codepen.io/AnnaSummer/pen/YzajzGj
Дальше сами

Comments

[dhelfy]

Спасибо огромное!

[dhelfy]

Сейчас разобрался в вашем коде, посмотрел что, да как работает. У меня появился вопрос, почему блок "ползёт" если у контейнера position: fixed; , но не ползет при position: relative?

[Ankhena]

dhelfy, сложно сказать куда он ползет
у меня никуда никто не ползет https://codepen.io/AnnaSummer/pen/poLZvVV

[dhelfy]

Ankhena, действительно не ползет. Но он ползет, если контейнеру явно не задавать position, почему так?
https://codepen.io/dhelfy/pen/dyZEWQz?editors=1100

[Ankhena]

dhelfy, потому что тогда он считает от body. Или ближайшего не статика.
Хотя бы самые основы позиционирования почитайте.

[dhelfy]

Ankhena, Спасибо еще раз