Сss позиционирование блоков на полном экранном изображении. Как сделать?

Question

[Anatoliy]

Как сделать позиционирование блоков на полном экранном изображении.

Например: есть изображение ветки дерева у которой блоки должны находиться на листьях.
Как лучше сделать сеткой или position: absolute;
Если второе то как сделать чтобы на разных изображения блоки не слетали с листьев?

Если можно приведите примеры сайтов с такой реализацией.

Answer 1

[Александр Зачиналов]

А) можно на absolute, но:
1) Весь контент должен находиться в контейнере и иметь фиксированную ширину в диапазоне разрешений устройств (например как container у bootstrap)
2) Подгонять позиции блоков к листьям придется для каждого вьюпорта, т.е. минимум 4 раза (если у вас есть адаптивка вообще)

Б) мне нравиться способ, когда поверх изображения накладывают SVG, на котором расставлены прозрачные блоки с id, потом через js привязываются к ним и генерируют контент (но способ плох, если вам важен SEO для этих блоков)

B) использовать чистый canvas или библиотеки для отрисовки графики d3js, snapjs и др (красиво, удобно, гибко, но сложнее в реализации и SEO тоже пострадает)

Comments

[Anatoliy]

Спасибо, буду пробовать первый вариант.
А можешь показать какие нибудь сайты в пример?

[Александр Зачиналов]

phresidence.lv/about - ссылки так расставлены, но здесь адаптивки нет, при адаптиве вам просто нужно менять размеры ссылок и их позицию (top, left) с помощью медиа-запросов

[Anatoliy]

Александр Зачиналов: Спасибо.