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

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

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

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

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

.child {
    margin-left: 0.2ex;
}

Answer 2

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

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