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

Prevent margin or padding of outer elements from moving absolute element at a fixed position relatively to its parent

提问人：Hitokage 提问时间：9/22/2023 最后编辑：Hitokage 更新时间：9/22/2023 访问量：35

问：

我读过关于这个或这个元素的绝对定位的问题。我假设使用 transform 函数是使元素在父元素中静态的一种方式。我做了这个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）应用其边距。如果没有零边距/填充，则当调整窗口大小时，绝对元素的位置会发生变化。

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

我的问题是：如何创建一个具有绝对定位子项的容器，即使调整窗口大小或更改边距，该子容器也会保持其确切位置？因此，容器是独立的，并且内部的子容器仅受容器大小变化的影响。就像在容器内有一个独立的世界一样，它随着它的孩子而扩展，保持他们的位置，例如与各种物体或其他东西的图像。

在这里摆弄。

HTML CSS 转换

答：

1赞 Skar 9/22/2023 #1

您应该始终使用

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

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

要注意的另一件事是，您正在使用，但您的父（容器）没有设置。他们总是“成对出现”。position: absoluteposition: relative

0赞 Hitokage 9/22/2023

谢谢！我在容器中尝试过，但它没有解决问题。不过，这是一个很好的观点。嗯，我以为一般不建议使用。position: relative;* {}

1赞 Skar 9/22/2023

每个浏览器都使用不同的默认大小，因此在一个浏览器中它看起来不错，但在其他浏览器中则很奇怪。因此，您应该始终将这些值设置为 0 并将其应用于整个项目（在全局 css 文件中）

上一个：IntersectionObserver 和 transform：转换不可预知的行为

下一个：当任何祖先处于位置时，3D 变换会闪烁：固定

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

Prevent margin or padding of outer elements from moving absolute element at a fixed position relatively to its parent

评论

评论