Change of point location when changing the resolution

Question

I try to understand position and values absolute and relative, but I have one problem. Why, when I use the "right" attribute, my "A" point changes position when the resolution changes, but when it applies the "left" attribute, everything stays in place well, even when I change the resolution?

Please check on different resolutions: - Left: - Right:

Code: - Left:

html,
body {
  background-color: #f4f4f4;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

main {
  background-color: #fefefe;
  min-width: 350px;
  max-width: 700px;
  width: 40vw;
  padding: 2rem;
}

.map {
  background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Simple_world_map.svg/2000px-Simple_world_map.svg.png")
    no-repeat; 
  background-size: cover;
  height: 60vh;
  position: relative;
}

.absolute {
  position: absolute;
  left: 100px;
  top: 20px;
  color: blue;
}

<main>
    <form>
        <div class="map">
        <div class="absolute">
          <h1>A</h1>
          </div>
      </div>
    </form>
</main>

• Right:

html,
body {
  background-color: #f4f4f4;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

main {
  background-color: #fefefe;
  min-width: 350px;
  max-width: 700px;
  width: 40vw;
  padding: 2rem;
}

.map {
  background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Simple_world_map.svg/2000px-Simple_world_map.svg.png")
    no-repeat; 
  background-size: cover;
  height: 60vh;
  position: relative;
}

.absolute {
  position: absolute;
  right: 447px;
  top: 20px;
  color: blue;
}

<main>
    <form>
        <div class="map">
        <div class="absolute">
          <h1>A</h1>
          </div>
      </div>
    </form>
</main>

My question is why this is happening, why the use of "right" is so unstable?

Answer 1

Because the absolute position is "relative" to .map div that it has no fixed width ( it changes as the browser size changes, from min 350px to max 700px - inherits this rule from the parent main). So the .map's right border continuously changes its position. The left border, on the other hand, "remains steady" so the h1 never change its position.

I try to explain better with an image: