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”上方，略微位于右侧。换句话说，绝对位置是相对于页面而不是其包含元素呈现的。

为什么会这样？我对这里的绝对定位有什么误解？
我怎样才能得到我期待的行为？

请参阅此jsFiddle。

Answer 1

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

祖先元素都不是position: static，因此它与视口的初始位置有关。

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

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

.child {
    margin-left: 0.2ex;
}

Answer 2

要将子项相对于其父项定位，只需将position:relative添加到PARENT'样式中 - 然后所有位置为：absolute的子项将相对于父项绝对。

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

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

2 个答案: