更改分辨率时更改点位置

Question

我试着理解绝对和相对的位置和价值，但我有一个问题。 为什么，当我使用＆＃34;对＆＃34;属性，我的＆＃34; A＆＃34;当分辨率改变时，点会改变位置，但是当它应用＆＃34; left＆＃34;属性，即使我改变分辨率，一切都保持良好状态？

请检查不同的决议： - 剩下： - 对：

代码： - 左：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• 右：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的问题是为什么会发生这种情况，为什么使用＆＃34;对＆＃34;是如此不稳定？

Answer 1

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

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