调整浏览器窗口大小时按钮移位，如何固定其相对背景图的位置？

你的按钮在窗口缩放时移位，核心原因是定位参考系不匹配：

你用position: absolute给按钮设置的top:69%; left:45%是相对于浏览器视口的，但背景图用background-size: cover显示时，会根据窗口的宽高比自动调整缩放和裁剪范围——当窗口形状变化时，背景图的实际显示区域在视口中的位置会微调，而按钮的位置始终跟着视口走，自然就和背景图的相对位置错位了。

修复方案：统一定位参考系 #

我们可以把背景图和按钮放在同一个容器里，让按钮相对于这个容器定位，容器的显示逻辑和原来的背景图完全一致，这样按钮和背景图的相对位置就能固定下来。

修改后的HTML结构：

<div class="bg-container">
  <a href="register.html">
    <button type="submit" value="Submit" id="loginbutton">Login</button>
  </a>
</div>

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 和你原来的背景属性完全一致 */
  background: url(ht.JPG);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  /* 关键：让容器成为按钮的定位参考 */
  position: relative;
}

#loginbutton {
  font-weight: bold;
  font-size: 18px;
  opacity: 0.6;
  text-align: center;
  border: none;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  color: black;
  background-color: #EAEAEA;
  /* 现在相对于容器定位 */
  position: absolute;
  top: 69%;
  left: 50%;
  /* 让按钮自身水平居中，避免按钮宽度影响位置精度 */
  transform: translateX(-50%);
}

额外优化点： #

• 删掉了重复的background: transparent（background-color会覆盖它，无实际作用）；
• 用transform: translateX(-50%)替代固定的left:45%，让按钮的中心精准对齐容器的水平中线，位置更稳定；
• 移除了无效的align-items: center（这是flex容器属性，按钮本身不是flex容器，该属性不生效）。

现在你缩放窗口时，按钮会始终保持在背景图的中下区域，不会再移位啦。

内容的提问来源于stack exchange，提问作者user5238258