如何在响应式网站中创建位置固定不偏移的按钮？

问题出在绝对定位的基准不一致：当前.giftcard的position: absolute是相对于浏览器视口（因为父元素.main_giftcard没有设置position: relative），而背景图是绑定在.main_giftcard容器上的。当屏幕缩放时，视口和容器的尺寸变化比例不同，就会导致按钮和背景图的相对位置偏移。

核心修改方案 #

给.main_giftcard添加position: relative，让子元素的绝对定位锚定在这个容器上，确保按钮和背景图始终共享同一个坐标系。

修改后的CSS代码：

.main_giftcard {
  height: 100vh;
  background-image: url(../../data/image/giftcard/bn.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative; /* 关键：让子元素绝对定位基于此容器 */
}
.giftcard {
  position: absolute;
  bottom: 20%;
  right: 33%;
  /* 现在定位基准是.main_giftcard，而非视口 */
}
.button-69 {
  display: block;
  color: white;
  margin: 0;
  background-color: initial;
  background-image: linear-gradient(#ffbf01 0, #ffbf01 100%);
  border-radius: 5px;
  border-style: none;
  box-shadow: rgba(245, 244, 247, 0.25) 0 1px 1px inset;
  color: #fff;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 60px;
  line-height: 60px;
  margin-left: -4px;
  outline: 0;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.05, 0.03, 0.35, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: bottom;
  width: 190px;
}

进阶优化（可选） #

如果背景图缩放时出现拉伸变形，导致按钮和背景图的相对位置仍有偏差，可以调整背景图的显示规则：

1. 用background-size: cover让背景图铺满容器且保持比例（可能裁剪部分区域）：

.main_giftcard {
  height: 100vh;
  background-image: url(../../data/image/giftcard/bn.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; /* 居中显示 */
  position: relative;
}

2. 或者用aspect-ratio强制容器和背景图保持相同比例，确保缩放时完全匹配：
   假设背景图宽高比为16:9，添加以下属性：

.main_giftcard {
  /* 其他样式不变 */
  aspect-ratio: 16/9; /* 替换为你的背景图实际比例 */
  margin: 0 auto; /* 水平居中容器 */
}

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