如何让absolute定位的子元素以body为定位基准（父元素定位不可改）

先明确你的场景：

我们有如下HTML结构：

<div id="parent"> <div id="child"> </div> </div>

对应的CSS代码如下：

#parent{ position:absolute; }
#child{ position:absolute; top:10px; left:30px; }

当前#child元素的top和left属性以其父元素#parent为定位基准，希望将#child的top和left改为以body为定位基准，但无法修改#parent的position属性。

针对这个需求，这里有几个实用方案，你可以根据场景选择：

方案1：改用position: fixed（最简单的视口定位） #

如果你的子元素不需要随页面滚动而移动，直接把#child的定位方式改成fixed就行——fixed元素的定位基准是浏览器视口（等同于以body为基准）：

#child {
  position: fixed; /* 替换原来的absolute */
  top: 10px;
  left: 30px;
}

⚠️ 注意：这个方法会让元素固定在视口位置，滚动页面时它不会跟随内容移动，如果这不符合你的交互需求，看下面的方案。

方案2：调整HTML结构，将子元素移出父元素 #

如果允许修改HTML结构，直接把#child从#parent里移出来，放到body节点下，这样它的position:absolute就会自动以body为基准：

<div id="parent"></div>
<div id="child"></div>

CSS保持原来的#child样式即可，不需要额外修改。

方案3：用JavaScript计算并动态调整位置（适配动态场景） #

如果既不能修改HTML和父元素CSS，又需要子元素随页面滚动，那可以用JS计算#parent相对于body的偏移量，然后反向调整#child的定位值：

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 获取父元素相对于body的偏移信息
const parentRect = parent.getBoundingClientRect();
const bodyRect = document.body.getBoundingClientRect();

// 计算子元素需要的最终偏移：目标位置 - 父元素的偏移量
const targetTop = 10;
const targetLeft = 30;
child.style.top = `${targetTop - parentRect.top + bodyRect.top}px`;
child.style.left = `${targetLeft - parentRect.left + bodyRect.left}px`;

这个方法可以处理父元素位置动态变化的情况，比如父元素可能被其他元素影响而移动，JS会实时计算并调整子元素的位置。

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