为什么这个绝对定位的元素不相对于它的容器定位？

Question

我有这个简单的代码来并排放置两个div #container 元素。在其中的每一个中都有一个子 div #child，我想相对于它的父 (div #container) 定位它。

<style>
.container {
    float:left;
    margin-right: 10px;
}

.child {
    position: absolute;
    left: 0.2ex;
}
</style>

<div class="container">a<br/>
    <div class="child">b</div>
</div>
<div class="container">c<br/>
    <div class="child">d</div>
</div>​

但是，与我期望的结果不同——“d”位于“c”下方但略微向右推，而“d”位于“b”上方并略微向右。换句话说，绝对位置是相对于页面而不是其包含元素呈现的。

1. 为什么会这样？我在这里对绝对定位有什么误解？
2. 如何获得我所期望的行为？

看到这个jsFiddle。

Answer 1

要相对于其父级定位子级，只需将position:relative 添加到 PARENT'S 样式 - 然后所有具有 position:absolute 的子级将相对于父级是绝对的。

.container {
    float:left;
    margin-right: 10px;
    position:relative;
}

Answer 2

绝对定位元素相对于其包含块的边缘进行定位，该块被定义为不是position: static的第一个祖先。

所有祖先元素都不是position: static，所以它是相对于视口的初始位置而言的。

如果您真的想绝对定位它们，请在 .container 元素上设置 position: relative。

也就是说，看起来你最好还是这样做：

.child {
    margin-left: 0.2ex;
}