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>

этот код добавляет текст "внутри" в нижней части страницы.

3 103
css cursor-position

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

118

назначение position:relative to .outside, а потом position:absolute; bottom:0; на .inside.

вот так:

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

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

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

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

18