CSS绝对定位基于同级元素而不是父级元素进行定位

Question

CSS绝对定位基于同级元素而不是父级元素进行定位

6

我对绝对定位有些困惑。我一直认为，如果我将一个元素进行绝对定位，它会相对于它的父元素进行定位（与相对定位的通常位置相反）。但在做作业时，我遇到了这种情况，我感到很困惑：

<body>
  <div> <!-- This is colored red in my example -->
    ...
  </div>
  <div style="position: absolute;"> <!-- This is colored green in my example -->
    ...
  </div>
</body>

我期望的结果是：

我得到的结果是：

当我使用 left/right/top/bottom 来设置实际位置时，绝对定位元素会按照预期位置显示。所以，position: absolute 只是在未指定其他属性时，将元素设置为其原本应有的位置吗？

- Aram Becker

如果你不重置top位置，它会保留原始定位的空间。 - DaniP

1

可能是位置：绝对而未设置top/left/bottom/right？的重复问题。 - alesc

2个回答

0

你对位置（position）和展示（display）之间的差异感到困惑。

位置将更改您的元素相对于哪个元素进行定位。在您的情况下，子 div 现在被定位到了 body 元素。这就是为什么它在顶部的原因。

此外，您需要知道 div 被显示为块级元素，这意味着它将占用所有宽度。如果您想左右对齐两个 div，请使用现代方法 flexbox。旧的方法是向左/向右浮动。

我已经制作了一篇详细解释 CSS position 的文章：

https://www.youtube.com/watch?v=nGN5CohGVTI

- Jason Ching

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Morfie · Accepted Answer

澄清一下：

“我一直以为如果我将一个元素定位为绝对定位，它将相对于其父元素定位”

不是这样的。如果一个元素具有 position: absolute;，它的位置是相对于DOM链中最近的具有 position: relative; 或 position: absolute; 的父级元素。如果没有父元素具有这个属性（即它们都是默认的 position: static），那么它的位置是相对于文档（页面）。

使用 position: absolute 时，请务必：

了解您希望它相对定位的父级，并确保该父级具有 position: relative; 属性。
在绝对定位对象上指定一个或多个 top/right/bottom/left 属性。