html - 为什么这个绝对定位的元素没有相对于它的容器定位？

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

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

没有一个祖先元素是 position: static，所以它是相对于视口(viewport)的初始位置。

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

也就是说，看起来您最好还是这样做:

.child {
    margin-left: 0.2ex;
}