调整窗口大小时fixed定位的div出现左右偏移晃动该如何修复？

根因说明 #

你的fixed定位元素使用left: 1%作为水平定位值，而fixed定位的百分比基准是浏览器视口宽度。调整窗口大小时视口宽度同步变化，1%对应的实际像素值也会改变，最终表现就是元素随窗口缩放左右偏移。

修复方案 #

方案1：替换水平定位的百分比单位 #

如果需求是让元素固定在视口左下角，和视口左侧距离固定不变，直接把left的百分比值换成px、rem等固定单位即可，垂直方向的bottom可以按需保留百分比或同样替换为固定单位：

div {
  height: 200px;
  width: 200px;
  position: fixed;
  bottom: 10px; /* 按需调整数值，也可保留1% */
  left: 10px; /* 替换原有的1%，数值按你需要的边距调整 */
  box-shadow: 0 0 5px -1px silver;
}

方案2：切换为基于父元素的绝对定位 #

如果你的实际需求是让元素跟随页面内某个父容器定位，而非绑定浏览器视口，把定位方式从fixed改为absolute，同时给父容器添加position: relative即可：

<!-- 父容器 -->
<div class="parent">
  <div class="target-box">
    <h1>Test</h1>
  </div>
</div>

.parent {
  position: relative;
  /* 父容器其他自定义样式 */
}
.target-box {
  height: 200px;
  width: 200px;
  position: absolute;
  bottom: 1%;
  left: 1%;
  box-shadow: 0 0 5px -1px silver;
}

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