将元素锁定到包含 div 的底部 [重复]

【问题标题】：Lock element to bottom of containing div [duplicate]将元素锁定到包含 div 的底部 [重复]
【发布时间】：2011-07-05 09:24:35
【问题描述】：

#Container {
    width: 500px;
    height: 600px;
}

#TheElement {
    width: 500px;
    height: 100px;
    background-color: #000000;
}

我如何让#TheElement 被锁定到#Container 的最底部，而不管容器内的其他内容如何，而没有一堆边距欺骗？

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用relative absolute positioning:

http://jsfiddle.net/gzJM6/

#Container {
    width: 500px;
    height: 600px;
    position: relative
}

#TheElement {
    width: 500px;
    height: 100px;
    background-color: #000000;
    position: absolute;
    bottom: 0;
    left: 0;
}

【讨论】：

这是我尝试的第一件事，但由于某种原因它不起作用
检查我的 jsFiddle，它似乎工作正常。您能否提供更多关于您的情况的详细信息？
哦...我错过了#Container 上的相对定位。现在可以了。谢谢。
是的，这很重要，因为 position: absolute 实际上是相对于最近的父元素 positioned。