如何使用 CSS 将一个元素放在另一个元素的底部？ [复制]

Posted 2023-03-05

【中文标题】如何使用 CSS 将一个元素放在另一个元素的底部？ [复制]

【英文标题】：How can place an element at the bottom of another element using CSS? [duplicate]

【发布时间】：2013-08-21 12:39:38

【问题描述】：

看看这个：http://jsfiddle.net/unimous/88uqJ/

<div id="d1">
    <div id="d2">
</div>
</div>

#d1 
    height: 3000px;
    background-color: red;


#d2 
    background-color: green;
    height: 40px;
    width: 40px;
    position: absolute;
    bottom: 0px;

我想让 div d2 出现在 d1 的底部，而不是屏幕的底部。

为什么position: absolute 在这里不起作用？

【问题讨论】：

tl;dr 添加#d1 position:relative;

【参考方案1】：

将position:relative 添加到您的 d1 div

jsFiddle example

绝对定位的元素是相对于它们最近的定位祖先来定位的。