Search code examples
javascripthtmlcsscoordinatesgame-development

Set CSS coordinates based on parent element

I have a game-level map image like this and I code by manual HTML - CSS - JS. I want to attach the level number based on the coordinates of the image but it moves to another position for another screen. I have used relative position for the parent element and absolute position for child elements. (I tried using px, em, rem, in, cm unit, but it hasn't worked well) enter image description here

I just want an idea for this problem. Thank you!

Solution

  • I think there are several ways to solve that problem. You mentioned like (I tried using px, em, rem, in, cm unit, but it hasn't worked well), it's true you failed because you tried with fixed amount.

    In order to make sure the child image is fixed on the certain place of parent image, you should use dynamic amount like following alternative solutions.

    1. CSS

    You can use percent in styling like.

    .map {
    position: absolute;
    width: ###%;
    height: ###%;
    x: ###%;
    y: ###%;
}
    1. You can use javascript.

    When loads the initial screen, you can calculate the ratio of the parent width to screen's width. And you can apply it to the styling using CSS selector or ID.

    1. Update the design.

    I think it's the proper and best solution. So you can update the design with map and markers together.

    Hope it works for you!