如何让绝对定位子元素不受外部边距/内边距及窗口缩放影响？

我研究过绝对定位相关问题，尝试用transform函数实现子元素在父容器内的定位，写了如下CSS和HTML代码：

#container
{
  width: 25%;
  aspect-ratio: 1;
  background-color: purple;
}

#element
{
  position: absolute;
  width: 2%;
  aspect-ratio: 1;
  background-color: violet;
  transform:translate(1151.5%, 0%);
}

<div id="container">
  <div id="element"></div>
</div>

但发现只有用全局样式* {margin: 0;padding: 0;}清零外部边距/内边距时，子元素位置才正常；如果不设置这个样式，窗口缩放或修改body边距都会导致子元素位置偏移。想知道怎么实现容器独立，让绝对定位子元素只随容器尺寸变化保持固定位置，不受外部因素影响。

核心问题是绝对定位的参考系——默认情况下，position: absolute的元素会以最近的已定位（position值不为static）祖先元素为参考；如果没有这样的祖先，就会以根元素（html/body）为参考。你的代码里#container未设置定位，所以子元素的定位参考根元素，自然会受body边距、窗口缩放影响。

解决步骤：

• 给父容器#container添加position: relative，将其设为子元素的定位参考系
• 调整transform的百分比值（现在参考系变为父容器，需替换为基于父容器的比例）

修改后的CSS代码：

#container
{
  width: 25%;
  aspect-ratio: 1;
  background-color: purple;
  position: relative; /* 关键：设置相对定位，成为子元素的定位参考 */
}

#element
{
  position: absolute;
  width: 2%;
  aspect-ratio: 1;
  background-color: violet;
  /* 若要让子元素贴父容器右侧，改为98%（父容器宽度 - 子元素宽度 = 100% - 2% = 98%） */
  transform: translate(98%, 0%);
}

修改后，子元素的定位完全基于父容器，无论body有没有边距、窗口如何缩放，子元素都会随父容器尺寸变化保持相对固定位置，实现容器独立。

如果不用transform，也可以直接用绝对定位的left属性，效果一致：

#element
{
  position: absolute;
  width: 2%;
  aspect-ratio: 1;
  background-color: violet;
  left: 98%; /* 等同于transform: translate(98%, 0%) */
  top: 0;
}

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