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>

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

+91
12 мар. '13 в 10:24
источник поделиться
3 ответа
.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, если он не определен, он будет использовать тело.

+108
12 мар. '13 в 10:26
источник

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

Так же:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
+57
12 мар. '13 в 10:26
источник

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

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

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

+17
12 мар. '13 в 10:30
источник

Посмотрите другие вопросы по меткам или Задайте вопрос