Ankhena, У меня div с текстом (аналог блока с ногой на картинке в посте) расположен посреди страницы как модальное окно. У него position: absolute, а у родителя relative. Далее я добавляю картинку (аналог белого зверька) как дочерний элемент моего div. Назначаю ей position: absolute, она изначально становится в правый верхний угол div-а. Всё вроде нормально. Но потом задаю left и top, картинка смещается в нужное место, однако при изменении размеров окна не прилипает к div, а позиционируется относительно окна браузера. Картинка получается как бы position: absolute от position: absolute.
Dmitry, абсолют от абсолюта это нормально. Правда, не понятно где там на скрине модальное окно. И обычно модалки имеют fixed, а не absolute. Но это сути не изменит.
Ваше описание намекает на неверно выбранные единицы измерения.
Но вы не предоставляете песочницу.
Сделайте песочницу на codepen.io или аналоге в которой видно проблему и как вы её решали.
Ankhena, Не знаю, актуален ли ещё вопрос, у меня мистика. Вот, грубо, страница, она не свёрстана и всё такое, но понять можно: https://nia.red/joomla/index.php?page=reader Одна картинка сверху сидящий мальчик работает нормально (при разных разрешениях), а остальные параметр top позиционируется относительно модального окна, а left (right) почему-то относительно всего экрана. Везде абсолютно одинаковый код, причём, кажется, иногда оно правильно работает для отдельных картинок, а потом всё опять сбивается. (position: absolute)
Нет никакой мистики. Все картинки работают одинаково.
Все позиционируются относительно.fixed-overlay-modal. По высоте
top у них задан в px.
top родителя тоже.
Поэтому верхний мальчик всегда прибит к верху .fixed-overlay-modal, а остальные съезжают при изменении высоты. По ширине
left у всех картинок задан в vw.
Ширина родителя при этом равна вьюпорту.
При изменении размеров окна все картинки двигаются. И верхний мальчик тоже.
Везде абсолютно одинаковый код, причём, кажется, иногда оно правильно работает для отдельных картинок, а потом всё опять сбивается.
Девтулзы Хрома любят подглючивать при работе в адаптивном режиме или переключении в адаптивный и обратно. Особенно, если открыто много вкладок.
Вывод:
Если нужно, чтобы что-то позиционировалось относительно блока с классом .modal, то так и делайте, а не от .fixed-overlay-modal. Иначе вычисляйте значения через calc и/или используйте clamp, min, max.
P.s.
1. Эти ваши "мальчики" это не контентные изображения. Если по какой-то причине не получается сделать их псевдоэлементами, то нужно убрать у них альты и скрыть от скринридеров aria-hidden="true".
2. Имеет смысл пересмотреть ваш код и перестать позиционировать блоки с помощью text-align.
Для этого есть банальный margin-inline: auto и флексы с гридами.
Ankhena, Если относительно Modal, то теперь они скрываются, обрезаются по границам окна. (Я поставил relative окну Modal, тогда позиционируются правильно)
Dmitry, позиционируйте от элемента не имеющего overflow (или не имеющего родителя с мешающим overflow.
Либо используйте для вычисления позиции calc, вероятно в сочетании с clamp, min, max. Поскольку ширина блока ограничена от 200 до 1024.
Удобнее считать от центра, а не от левого края.
Например, calc(50% - 30px)
Ещё одна альтернатива: объединить нижние картинки в один псевдоэлемент с множественным фоном (расставить картинки по местам с помощью bg position). Ему задать такие же параметры поведения ширины, как и блоку и центрировать.
Или напишите ТЗ, как эти элементы должны себя вести и обратитесь на фриланс.
Медведь? Измеряется длина пальцев медведя в пикселях и ему устанавливается смещение относительно целевого элемента на данное число пикселей. Либо в минус от ближайшей границы либо в плюс от дальней - тут как удобнее и зависит от других особенностей вёрстки. Ну или ещё какой вариант можно придумать. Плюс в данном случае изображение медведя с прозрачностью и на один пиксель с полупрозрачностью заходит на целевую картинку.
