css - 将 div 定位到包含 div 的底部

Question

如何将 div 定位到包含 div 的底部？

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

此代码将文本“内部”放在页面底部。

score 143 · Accepted Answer

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

需要是

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

绝对定位在 DOM 中查找最近的相对定位的父级，如果未定义，它将使用主体。

score 74 · Accepted Answer

分配position:relative给.outside，然后分配position:absolute; bottom:0;给您的.inside.

像这样：

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

score 20 · Accepted Answer

添加position: relative到.outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

相对定位的元素仍被认为在文档中的正常元素流中。相反，绝对定位的元素会从流中取出，因此在放置其他元素时不会占用空间。绝对定位的元素是相对于最近定位的祖先定位的。如果定位的祖先不存在，则使用初始容器。

“初始容器”将是<body>，但添加上述内容会.outside定位。

css - 将 div 定位到包含 div 的底部

3 回答 3

Related

Reference