防止外部元素的边距或填充相对于其父元素在固定位置移动绝对元素

Question

我读过有关 this 或 this 等元素绝对定位的问题。我假设使用转换函数是使元素在父级内部静态的一种方法。我做了这个CSS：

#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%);
}

使用 HTML：

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

问题是，这只有在我使用时才能正常工作：

* {
    margin: 0;
    padding: 0;
} 

防止外部元素（例如正文或 HTML）应用其边距。如果没有零边距/填充，调整窗口大小时绝对元素的位置会发生变化。

例如，更改正文的边距也会更改子元素的位置。

我的问题是：如何创建一个具有绝对定位子项的容器，即使调整窗口大小或更改边距也能保持其准确位置？这样容器是独立的，里面的子进程只受容器大小变化的影响。就像容器内有一个独立的世界，它随着其子级的缩放而保持其位置，例如具有各种对象或其他东西的图像。

在这里摆弄。

Answer 1

您应该始终使用

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

这是一种常见的做法，因为它删除了默认的边距和填充。这样你的元素就不会发生任何意外的移动。

另一件事要注意的是，您正在使用

position: absolute

，但您的父级（容器）没有设置

position: relative

。他们总是“成双成对”。