position div to bottom of containing div

How can i position a div to the bottom of the containing 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>

This code puts the text "inside" to the bottom of the page.

css
position

286237 次浏览

小开

最佳答案

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

小开

Assign position:relative to .outside, and then position:absolute; bottom:0; to your .inside.

像这样:

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

小开

Add position: relative to .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)

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

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