I have a parent div and place three svg ellipses and a image inside it. They need to have a certain position on top of the div. This position needs to be always the same no matter where the div moves or if it shrinks/grows (i want to execute an event when a certain position on the image gets clicked).

So far i was able to make the child elements shrink/grow with the parent div. They have a stable position inside the div, as long as top and left attribute is zero. As this is not possible, i am not sure how to accomplish it.

export const Example = () => {
  const hello1 = () => {
    // Add your event handling logic here
    window.alert("Hello 1!");
  };
  const hello2 = () => {
    // Add your event handling logic here
    window.alert("Hello 2!");
  };

  const hello3 = () => {
    // Add your event handling logic here
    window.alert("Hello 3!");
  };

return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", position: "relative" }}>
        <img src={VillageBack} alt="Village Back" style={{ flex: 1, objectFit: "contain" }} />
        <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ position: "absolute", top: -250, left: 0 }} >
          <ellipse cx="50" cy="50" rx="10" ry="15" fill="blue" style={{ cursor: "pointer" }} onClick={hello1} />
        </svg>
        <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ position: "absolute", top: 0, left: -190 }} >
          <ellipse cx="50" cy="50" rx="10" ry="15" fill="blue" style={{ cursor: "pointer" }} onClick={hello2} />
        </svg>
        <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ position: "absolute", top: -140, left: 280 }} >
          <ellipse cx="50" cy="50" rx="10" ry="15" fill="blue" style={{ cursor: "pointer" }} onClick={hello3} />
        </svg>
     
    </div>
  );
};

I am using it in react, but should be applicable for plain js as well.

My second problem is, that only the lowest svg is clickable. All others do not get recongized. Why? They are not overlapping

GOOD, because not shrinked

BAD, because shrunk