How to dynamically position elements over an image?


I need to dynamically position multiple points over an image, basing on a list of points and their X and Y coordinates coming from the database (see the mockup attached).

I have tried to set position relative to the image and create a block containing an icon with position absolute and dynamically set top and left properties. It works when it's used as a single block,  but when I try to use it inside a list widget it seems that one point can be only positioned inside the respective list item, not over the image. 

Is there any way to solve it or a component on the Forge that could be used in this case?


Hi on Forge you have a Component to this.

Try to see this solve your issue

I'm sorry Renato, but that is not a proper answer to the initial question by Dagmara.

She wants to overlay some points (maybe as images) to another image.

The final goal is to create a point for each seat of an office. And to be able to reserve them. So for each floor layout, there should be a combination of points. Hence the necessity to display those points on the image, dynamically.

Please let me know if I can further clarify the requirements.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.