Question

我尝试定位元素取决于它相对定位的父元素。这是我的例子

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

http://jsfiddle.net/4v4eLtp1/

我不明白为什么绝对定位元素出现在child_static div之后。我一直认为绝对定位元素不在流动之中。那么为什么child_absolute不会与child_static div重叠？

Answer 1

您忘了设置DIV的位置。

类似的东西：

top: 0;
left: 0;

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

（我改变了第二个DIV尺寸，你可以看到它们。）

Answer 2

我一直认为绝对定位元素不在流动之中。

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

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

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

换句话说，绝对定位的元素将位于相同的位置，因为它们不是绝对定位，除非他们的top，left，...偏移设置。

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

例如，请查看以下示例，其中 gold <div>元素由absolute定位元素覆盖。

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

为什么绝对定位元素取决于它的兄弟姐妹？

2 个答案: