使用CSS时按钮位置滞后、尺寸偏移及固定位置适配问题咨询

云上老周

2026-10-6

问题根因

按钮错位滞后、屏幕尺寸变化偏移的问题核心来自两处CSS配置问题：

父级.termsBox运行scale缩放动画时，根据CSS规范，设置了transform属性的元素会成为其子fixed定位元素的包含块，因此按钮的fixed定位会跟随正在缩放的父元素同步变形，动画结束后才恢复正常，即观测到的0.5-1秒滞后错位。
按钮使用视口百分比的top:74.2%、左右百分比margin定位，不同屏幕尺寸下视口宽高不同，自然会出现偏移。

修复方案（保留原有缩放动画）

仅需修改两处CSS规则即可，无需调整JS和HTML代码：

/* 给.termsBox新增relative定位，作为子元素定位参照 */
.termsBox {
  width: 30%;
  height: 60%;
  overflow: auto;
  margin: 0% auto 0% auto;
  background-color: white;
  border: 2px solid rgb(209, 208, 208);
  border-radius: 5px;
  animation: termsBoxZoom 0.3s linear;
  position: relative;
}

/* 重写.termsAgreeButton定位逻辑 */
.termsAgreeButton {
  font-size: 18px;
  position: sticky;
  width: 100%;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 8px;
  border: 2px solid rgb(122, 238, 93);
  border-radius: 0 0 5px 5px;
  background-color: rgb(229, 255, 222);
  color: rgb(122, 238, 93);
  transition: background-color 0.8s;
  box-sizing: border-box;
}