Как отпозиционировать элемент относительно декоративного элемента фона?
На сайте есть куча подобных элементов, что должны позиционироваться так, чтобы находиться над декоративными элементами с фона. Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается. Совершенно не представляю как с подобным работать
Дополнительно:
так этоже тоже просто фоновая картинка.
Про множесвтенные фоны знаете?
Про возможность позиционировать фоновую картинку знаете? Типа background-position: right 20px bottom 20px? Поддерживаются так же и проценты.
1. Слить мужика и фон в одно изображение.
2. Использовать относительные единицы (%, vw) и пропорции.
Я вот не очень уверена в этом.
Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.
Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.
Сначала нужно описать как оно должно себя вести на самом деле на родном языке. Можно нарисовать.
Т.е. что от чего зависит, как и куда должно или не должно двигаться. К какой точке прибито, если не должно. И т.д.
Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.
Ответы:
Медиа запросы
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы отпозиционировать элемент относительно декоративного элемента фона, можно воспользоваться свойством position в CSS.
Прежде всего, нужно убедиться, что у декоративного элемента фона задано свойство position: relative. Это позволит нам позиционировать другие элементы относительно этого элемента.
Далее, для элемента, который мы хотим отпозиционировать относительно декоративного элемента фона, можно задать свойство position: absolute. Затем можно использовать свойства top, bottom, left, right для точной настройки позиции элемента относительно декоративного элемента.
Пример кода на CSS:
.decorative-element { position: relative; } .positioned-element { position: absolute; top: 10px; left: 10px; }
В данном примере элемент с классом .positioned-element будет отпозиционирован относительно элемента с классом .decorative-element на 10px сверху и слева.
Таким образом, используя свойства position и координаты top, bottom, left, right, можно легко отпозиционировать элемент относительно декоративного элемента фона.