为什么将绝对定位的元素放置在其同级元素中而不是放置在页面的顶部？ [英] Why is an absolutely positioned element placed by its sibling instead of at the top corner of the page?

问题描述

我不明白为什么我的绝对定位元素出现在 child_static div之后。我一直认为绝对定位的元素会被淘汰。那么，为什么 child_absolute 不覆盖 child_static div？

I don't understand why my absolutely positioned element appears after my child_static div. I always thought that absolutely positioned elements are taken out of the flow. So why doesn't child_absolute cover the 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/

推荐答案

我一直认为绝对定位的元素已不在流程中。

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

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

Yes, they are removed from normal flow.

我不明白为什么绝对定位元素出现在child_static div之后。

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

仅仅是因为绝对定位会从正常流中删除元素，但这并不意味着它会改变位置

Just because absolute positioning removes elements from normal flow, it doesn't mean it does alter the position of the elements as well.

换句话说，绝对定位的元素将位于同一位置，因为除非 其 top ， left ，...已设置偏移量。

In other words, absolutely positioned elements would be at the same place as they are not positioned absolutely unless their top, left, ... offsets are set.

那么发生的是，它们将与下一个兄弟元素重叠ents，因为它们已不再是文档流的一部分。

So what happens is that they would overlap next sibling elements, because they are not part of document flow anymore.

例如，请看以下示例，其中 gold < div> 元素由绝对 ly定位的元素覆盖。

For instance have a look at the following example where the gold <div> element is covered by absolutely positioned element.

.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>

这篇关于为什么将绝对定位的元素放置在其同级元素中而不是放置在页面的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！