Keeping overlapping items in same relative position with aspect change

I have written a little website in HTML, CSS and Vanilla JavaScript. It shows you around a community garden in my town. It lets you look in the beds and greenhouse, and gives information on the plants growing there. My question is: I have spans on top of a div to create the red boxes on top of beds and plants that you can click on. But it is proving quite a challenge to keep the span in the same place relative to the div when the screen aspect ratio changes, like when looking on a mobile device in portrait compared to a desktop, which is always landscape.
The span is a child element of the div, so I thought making the span position relative would so most of the work and I’d just need to tweak sizes, but it doesn’t work at all when the aspect ratio changes. Since then, I have basically made 3 different fixed sizes that change with screen size media queries, but it’s not an ideal solution.

Here is the site so you can see what I mean by red boxes and so on: Seed Garden

Is there any way of “fixing” an element in place on top of another element? Or am I looking at this the wrong way entirely?

Make the parent container relative.

Give all circles position absolute.

Change the circles top / right / left / bottom properties in %.

You will have to experiment with the % values until you find each position above the plant, but they should stay at the same spot now.

Ah, so the child is in absolute position to the parent. Of course!
Thanks heaps :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.