html - 更改分辨率时点位置的更改

Question

我试图理解位置和值的绝对值和相对值，但我遇到了一个问题。为什么，当我使用“右”属性时，我的“A”点会随着分辨率改变而改变位置，但当它应用“左”属性时，即使我改变分辨率，一切都保持在原位？

请检查不同的分辨率:- 左边: - 正确的:

代码:- 左:

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>

• 右:

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>

我的问题是为什么会这样，为什么“正确”的使用如此不稳定？

Answer 1

因为绝对位置是“相对于”.map div，所以它没有固定宽度(它随着浏览器大小的变化而变化，从最小 350px 到最大 700px -从父 main 继承此规则)。所以 .map 的右边界不断改变它的位置。另一方面，左边框“保持稳定”，因此 h1 永远不会改变其位置。

我尝试用图片更好地解释: