如何絕對定位相對定位的元素？

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開發人員網絡