jsFiddle

Question

假设我有一个容器，我想将这个容器放入另一个容器中，这个容器也充满了其他东西。 CSS代码可能如下所示：

.parent-container {
    width: 100%;
    position: relative;
}
.child-container {
    width: 600px;
    position: absolute;
    left: 25px;
    bottom: 100px;
}

但是，.child-container还包含绝对定位的元素，这些元素的位置相对于.parent-container，因为.child-container没有position: relative。所以我的问题是，如何将.child-container的孩子相对于自己定位，同时仍然将其正确定位在.parent-container？

P上。 S.在.child-container'position: absolute中包裹div并制作.child-container position: relative应该可以解决问题，但我希望能有更多内容......语义

Answer 1

然而，.child-container还包括绝对定位的元素，它们相对于.parent-container位置，因为.child-container没有position：relative。

不正确的。绝对定位是指定位的最近祖先，而不是position: relative。除position: static之外的任何内容都会使元素定位。（position: relative不会将容器移出正常流程，因此当您想要设置没有副作用的定位上下文时使用它。）

由于父亲是position: absolute;，因此他们的位置已经相对于那个。

Answer 2

您不需要将.child-container位置更改为relative，以便将其设置为“relative”parent。请查看此MDN关于绝对位置的链接。

“绝对定位的元素相对于最近的定位祖先定位。如果定位的祖先不存在，则使用初始容器。”

*定位祖先是一个元素：相对，固定或绝对位置

Answer 3

绝对定位的元素应已相对于其父元素。这是一个演示，显示绝对定位中的嵌套项目

<强> HTML

<div class='parent-container'>
    Parent
    <div class='child-container'>
        1st Child
        <div class='grandchild-container'>
            2nd Child
        </div>
    </div>
</div>

CSS （添加颜色以说明差异）

.parent-container {
    position: relative;
    background: grey;
}
.child-container {
    position: absolute;
    background: red;
    left: 20px;
}
.grandchild-container {
    position: absolute;
    background: yellow;
    left: 20px;
}

jsFiddle

看起来像这样

demo *注意每个职位都与其父职位相关。

有关详细信息，请参阅：

如何绝对定位相对定位的元素？

3 个答案:

jsFiddle