如何防止绝对定位元素在窗口缩放时偏移相对父容器的位置？

嘿，这个问题我太熟了——你踩了绝对定位里一个超容易忽略的坑！咱们先拆解问题根源，再给你落地的解决方案：

问题出在哪？ #

你的.objA和.objB是和.frame同级的独立元素，而不是.frame的子元素。哪怕.frame设置了position: relative，绝对定位的元素只会相对于**最近的已定位父级（这里是body）**来计算位置，完全和.frame没关系。窗口缩放时，.frame的尺寸/位置跟着视口变，但两个绝对定位元素还是绑定body坐标系，自然就出现偏移了。

另外你的代码里还有个小语法错误：.objA的left: -20少了百分号，应该是left: -20%;，不然浏览器会把它当成无效值处理。

解决方案：把绝对定位元素放到容器内部 #

只需要把.objA和.objB移动到.frame的标签内部，让它们成为.frame的子元素。这样因为.frame是position: relative，绝对定位的子元素就会完全绑定.frame的坐标系，不管窗口怎么缩放，相对位置都能稳稳保持。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .frame { 
      width: 70vh; 
      height: 90vh; 
      border: 10px solid red; 
      margin: 10px auto; 
      position: relative; 
      /* 加个overflow: hidden可以避免子元素超出容器时影响页面布局，可选 */
      overflow: hidden;
    }
    .objA { 
      width: 130%; 
      position: absolute; 
      height: 40%; 
      bottom: -10%; 
      left: -20%; /* 补上了百分号 */
      border: 2px solid green; 
      background: rgba(10, 101, 10, 0.7); 
      z-index: 2; 
    }
    .objB { 
      width: 10%; 
      position: absolute; 
      height: 20%; 
      bottom: 20%; 
      left: 30%; 
      background: red; 
      z-index: 1; 
    }
  </style>
</head>
<body>
  <div class="frame">
    <div class="objA"></div>
    <div class="objB"></div>
  </div>
</body>
</html>

原理说明 #

绝对定位的规则是：元素会相对于第一个设置了position: relative/absolute/fixed/sticky的父元素进行定位。如果所有父元素都是默认的position: static，就会相对于根节点（html/body）定位。把绝对定位元素放到position: relative的容器里，就相当于给它们指定了“定位参照物”，后续的top/bottom/left/right都是相对于这个容器的尺寸来计算的，自然能在响应式缩放中保持相对位置。

实际场景扩展 #

你提到的波浪、星星、机器人这些独立元素，只要把它们全部作为那个position: relative的容器的子元素，用百分比（或者基于容器的单位）设置定位参数，就能在任何视口缩放场景下保持固定的相对位置。如果需要元素超出容器显示，去掉overflow: hidden即可。

内容的提问来源于stack exchange，提问作者Young L.