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

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 ？

PS将.child-container包裹在一个position: absolute d div并将.child-container position: relative应该解决这个问题，但是我希望有更多...语义。

Answer 1

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

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

由于父级是position: absolute; 他们已经相对于此定位。

Answer 2

您无需将.child-container的位置更改为相对，即可将其设置为“相对”父母。 请查看MDN中有关绝对排名的链接。

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

* positioned祖先是具有以下位置的元素：相对，固定或绝对位置

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

看起来像这样

*请注意，每个职位都是相对于其上级的。

有关更多信息，请参见：

• 定位-W3Schools
• 职位-Mozilla开发人员网络