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

Question

[Roman_Gy]

Всем привет!

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

Позиционирую числа показателей абсолютно с помощью процентов, контейнер имеет фикс ширину до определенного размера экрана. При верстке адаптива на маленьких разрешениях контейнер перестает быть фикс ширины (становится 92%), соответственно позиционированные числа показателей при уменьшении размера экрана начинают "плясать" и "дергаться".

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

Макет блока:


Код (на codepen нет премиума, поэтому не могу использовать изображение для подложки, поэтому ниже дополнительно ссылка на свой хостинг, где залит результат):

https://rg-developer.ru/misc/demo-st

Comments

[Ankhena]

https://jsfiddle.net/Ankhena/uxrcj59y/

[Roman_Gy]

Ankhena, Спасибо! Примерно понял идею. В моем случае тогда изображение-подложку лучше привязать к ширине контейнера, а не к высоте?

[Ankhena]

Roman_Gy, я не знаю, что у вас в ТЗ и как вам удобнее.

[Roman_Gy]

Ankhena,
Само поведение блока должно быть следующим: есть фон/подложка (на скрине в вопросе), это изображение должно быть резиновым. Над фоном есть определенные показатели, которые должны быть всегда зафиксированы над фоном в одних и тех же местах при любом размере экрана.

С помощью процентов я смог реализовать данное поведение, но ровно до того, пока ширина контейнера имеет фиксированное значение. Но когда контейнер становится плавающей ширины, то соответственно мои позиционированные в % (от фикс ширины контейнера) числа теряют свои правильные позиции. Вот как это исправить я и пытаюсь понять, но очевидно мой подход не совсем правильный.

[Spartak (Web-StyleStudio)]

Roman_Gy,

Код (на codepen нет премиума, поэтому не могу использовать изображение для подложки,

Вы просто неправильно указали путь к изображению, вот так надо было

<img src="https://rg-developer.ru/misc/demo-st/img/bg-statistics.jpg" alt="Background: statistics" class="statistics__background">

[Ankhena]

Roman_Gy, не очень понятно, куда всё может уехать, если размеры в относительных единицах измерения и сохранены пропорции.

[Roman_Gy]

Ankhena, у меня изначально просто на больших размерах ширина контейнера была фиксированная, а элементы были позиционированы через %, до момента пока контейнер не становился резиновым все было нормально, а потом из-за этого все ехало. Сейчас разобрался, просто отказался от фикс ширины контейнера для данного блока.

Спасибо за пример!

Хотел спросить единственно, в данном случае padding-top 100% от чего считается?

.block::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

[Ankhena]

Roman_Gy,

в данном случае padding-top 100% от чего считается?

padding-top для элементов в потоке всегда считается от ширины родителя, для остальных от ширины того от кого позиционируется.