CSS 绝对位置指向兄弟而不是父答案

【问题标题】：CSS absolute position orients on sibling rather than parentCSS 绝对位置指向兄弟而不是父
【发布时间】：2018-05-18 05:17:51
【问题描述】：

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

<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 的情况下未指定时的确切位置？

【问题讨论】：

如果你不重置 top 位置是的，它会保留他原来的位置。
position: absolute without setting top/left/bottom/right?的可能重复

标签： html css css-position

【解决方案1】：

澄清一下：

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

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

使用位置时：绝对，始终：

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

【讨论】：

这不是 OP 正在寻找的答案。他/她想知道当左/上/右/下未设置时，为什么这不起作用。简短回答：position: absolute 在未设置时无效。
这不是真的。设定位置：绝对；将元素从正常流程中弹出。这是一个代码笔来演示：codepen.io/morfie78/pen/mqoXem 你会看到第一个元素有 position: absolute;在上面。这会弹出该元素，第二个元素会向上移动。如果删除 position: absolute;它恢复正常。
我只是在我对问题的评论中提到了另一个答案（我将其链接为“可能的重复”）。

【解决方案2】：

您对位置和显示之间的区别感到困惑。

Position 将更改您的元素相对于哪个元素进行定位。在您的情况下，您的子 div 现在定位到 body 元素。这就是为什么它在上面。

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

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

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

【讨论】：