Question

我现在对绝对定位感到有点困惑。我一直认为，如果我绝对定位一个元素，它将相对于它的父元素定位（与相对于它的通常位置相对，如相对定位）。在作业期间，我现在遇到了这种情况，我很困惑：

<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只是设置为在没有指定的情况下，在没有position: absolute的情况下采取它的确切位置吗？

Answer 1

澄清：

“我一直认为，如果我绝对定位一个元素，它会相对于它的父元素“

不。如果元素具有position: absolute;，则它相对于DOM链中最近的父节点定位，该父节点上指定了position: relative;或position: absolute;。如果没有父母拥有它（即，它们都是position: static，这是默认值），那么它相对于文档（页面）定位。

使用position：absolute时，总是：

请注意您希望它相对于哪个父级，并确保父级具有位置：relative;在它上面。
在绝对定位的对象上指定一个或多个顶部/右侧/底部/左侧属性。

Answer 2

您对位置和显示之间的差异感到困惑。

位置将更改元素相对于哪个元素的位置。在您的情况下，您的孩子div现在位于body元素上。这就是为什么它是最重要的。

此外，您还需要注意div被显示为块，这意味着它将占用所有宽度。如果要左右对齐2个div，现代的方法是使用flexbox。旧的方式是向左/向右浮动。

我写了一篇文章来详细解释CSS的位置：

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

CSS绝对位置定位于兄弟而不是父母

2 个答案: