CSS 绝对位置面向兄弟而不是父
Ara*_*ker 5 html css css-position
我现在对绝对定位有点困惑。我一直认为，如果我绝对定位一个元素，它将相对于它的父元素定位（与相对于它的通常位置（如相对定位）相反）。在做作业时，我现在遇到了这种情况，我很困惑：
<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另外指定的情况下采用它所在的确切位置？
澄清：
“我一直认为，如果我绝对定位一个元素，它将相对于它的父元素定位”
没有。如果某个元素具有position: absolute;，则该元素相对于 DOM 链中具有position: relative;或position: absolute;指定的最近父元素进行定位。如果没有父级拥有它（即它们都是position: static，这是默认值），则它相对于文档（页面）定位。
当使用绝对位置时，始终：
- 请注意您希望其相对于哪个父级定位，并确保父级具有position:relative; 在上面。
- 指定绝对定位对象的上/右/下/左属性中的一个或多个。
- 那不是真的。设置位置：绝对；将元素从正常流程中弹出。这是一个用于演示的代码笔：https://codepen.io/morfie78/pen/mqoXem 您将看到第一个元素具有position:absolute; 在上面。这会弹出该元素，第二个元素会向上移动。如果删除位置：绝对；它恢复正常。 (2认同)