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>

Этот код помещает текст "внутри" в нижнюю часть страницы.

Ответ 1

.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, если он не определен, он будет использовать тело.

Ответ 2

Назначьте position:relative на .outside, а затем position:absolute; bottom:0; на .inside.

Так же:

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

Ответ 3

Добавьте position: relative в .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)

Элементы, которые расположены относительно, по-прежнему считаются находящимися в нормальном потоке элементов документа. Напротив, элемент, который позиционируется абсолютно, вынимается из потока и, таким образом, не занимает места при размещении других элементов. Абсолютно позиционируемый элемент расположен относительно ближайшего расположенного предка. Если позиционированного предка не существует, используется исходный контейнер.

"Начальный контейнер" будет <body>, но добавление выше делает расположение .outside.