为什么绝对定位的元素是由它的兄弟放置的，而不是放在页面的顶角？

Question

我不明白为什么我的绝对定位元素出现在 child_static div 之后。我一直认为绝对定位的元素被排除在流程之外。那么为什么 child_absolute 不涵盖 child_static div？

.parent {
    position: relative;
}
.child_static {
    height: 20px;
    background: blue;
}
.child_absolute {
    position: absolute;
    height: 20px;
    width: 100%;
    background: green;
}

<div class='parent'>
    <div class='child_static'></div>
    <div class='child_absolute'></div>
</div>

http://jsfiddle.net/4v4eLtp1/

Answer 1

您忘记设置您的 DIV 从哪一侧定位。

类似于：

top: 0;
left: 0;

http://jsfiddle.net/Paf_Sebastien/uqprmkwo/

（我更改了第二个 DIV 维度，以便您可以看到两者。）

Answer 2

I always thought that absolute positioned elements are out of the flow.

是的，它们已从正常流程中删除。

I don't understand why absolute positioned element appeared after child_static div.

仅仅因为绝对定位从正常流中移除了元素，并不意味着它也改变了元素的位置。

换句话说，绝对定位的元素将在同一位置，因为它们不是绝对定位的除非它们的 top, left, .. . 设置了偏移量。

所以发生的情况是它们会与下一个同级元素重叠，因为它们不再是文档流的一部分。

例如，请看下面的示例，其中 gold <div> 元素被 absolutely 定位的元素覆盖。

.parent {
    position: relative;
}

.child_static {
    height: 20px;
    background: blue;
}

.child_absolute {
    position: absolute;
    height: 20px;
    width: 100%;
    background: green;
}

.child_static ~ .child_static {
    background: gold;
}

<div class='parent'>
    <div class='child_static'>Green</div>
    <div class='child_absolute'>Blue</div>
    <div class='child_static'>Gold</div>
</div>

为什么绝对定位的元素是由它的兄弟放置的，而不是放在页面的顶角？

Why is an absolutely positioned element placed by its sibling instead of at the top corner of the page?

html

css

css-position

absolute