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

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

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

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

На сайте есть куча подобных элементов, что должны позиционироваться так, чтобы находиться над декоративными элементами с фона. Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается. Совершенно не представляю как с подобным работать

Дополнительно:

так этоже тоже просто фоновая картинка.
Про множесвтенные фоны знаете?
Про возможность позиционировать фоновую картинку знаете? Типа background-position: right 20px bottom 20px? Поддерживаются так же и проценты.

  • Если вы уверены в том, что фон и мужик всегда должны иметь одинаковое взаиморасположение, то можно:
    1. Слить мужика и фон в одно изображение.
    2. Использовать относительные единицы (%, vw) и пропорции.

    Я вот не очень уверена в этом.
    Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.

    Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.

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

    Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.

  • Если по каким-то причинам комментарий @Вадим'а не подойдет, к примеру, верхние активные элементы тоже могут свободно "гулять" по экрану, то придется вручную позиционировать элемент, с помощью javascript. На каждый onresize перевычислять с каким зумом и в какое место нужно поместить картинку. Зум и положение можно расчитать как верх - верх надписи "Best SEO & ...", низ - верхний край нижнего блока меню (Website & Social...) Ну и чтобы вправо не вываливалось...

    • Ответы:

    Медиа запросы

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как отпозиционировать элемент относительно декоративного элемента фона?Есть ответ
      • 08.04.2024
      Ответить

      Для того чтобы отпозиционировать элемент относительно декоративного элемента фона, можно воспользоваться свойством 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, можно легко отпозиционировать элемент относительно декоративного элемента фона.

    Оставить комментарий