1

假设我有一个容器，并且我想将这个容器放入另一个容器中，该容器也装满了其他东西。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 用 'd 包装.child-container和position: absolute制作div应该.child-container position: relative可以解决问题，但我希望有更多...语义。

4

3 回答 3

4

但是，.child-container 也包括绝对定位的元素，它们是相对于 .parent-container 定位的，因为 .child-container 没有 position: relative。

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

由于父母是position: absolute;他们已经相对于那个定位。

于 2013-08-28T12:37:50.617 回答
2

您无需将 .child-container 位置更改为 relative 以设置他具有“相对”父级。请查看MDN中关于绝对位置的链接。

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

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

于 2013-08-28T12:37:23.330 回答
0

绝对定位的元素应该已经相对于它们的父元素。这是一个演示，它显示了绝对定位中的嵌套项

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

它看起来像这样

演示*请注意，每个位置都相对于其父位置。

有关更多信息，请参阅：

于 2013-08-28T12:48:21.847 回答