CSS – 位置div到包含div的底部

我如何将一个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> 

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

 .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中最近的相对位置的父对象,如果没有定义它将使用主体。

指定position:relative对于.outside ,然后position:absolute; bottom:0; position:absolute; bottom:0; 到你的.inside

像这样:

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

添加position: relative对于.outside 。 ( https://developer.mozilla.org/en-US/docs/CSS/position

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

“最初的容器”将是<body> ,但添加上面使得.outside定位。