css - позиция div в нижней части содержащего div

118

Как я могу разместить 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>

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

css position

— nagy.zsolt.hun
источник

.outside needsposition: relative;

— Imperative

относительный, да, и тогда он не знает, насколько большим он должен быть для хранения содержимого дочернего div, к сожалению, поэтому, если это не статическое значение, вернемся к исходному вопросу. Как разместить один div внизу другого div (подразумевается: «не ломая все»).

— JosephK

Ответы:

136

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

— Карл
источник

Спасибо. Вы можете объяснить почему?

— nagy.zsolt.hun

absoluteищет ближайшего relativeродителя. По умолчанию это bodyиз document. Поэтому, если родительский объект DOM ( .outside) не имеет свойства быть, relativeвы .insideперейдете к нижней части тега body.

« Абсолютное позиционирование ищет ближайшего относительно позиционированного родителя в DOM, если он не определен, он будет использовать тело». Вы только что так много мне объяснили ! Теперь я действительно начинаю понимать CSS. СПАСИБО!

— Саймон Форсберг

Absolute фактически ищет ближайшего предка, не заданного по умолчанию (= статического), который часто позиционируется относительно. Он также не обязательно должен быть прямым родителем, но может, например, быть бабушкой или дедушкой.

— mzwaal

Это зависит от постоянной высоты, что ОЧЕНЬ ПЛОХО. Простое изменение шрифта, размера шрифта, отступов, полей и черт знает что еще требует экспериментов, чтобы угадать новую высоту.

— Андерсон

Назначают position:relativeк .outside, а затем position:absolute; bottom:0;к вашему .inside.

Вот так:

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

— dsgriffin
источник

это могло быть основой для липкого нижнего колонтитула, не так ли?

— Cade Galt

Я не могу использовать position: absolute; для второго div. это мое ограничение, можете ли вы дать мне другие варианты?

— Piyush Dholariya

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

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

«Исходный контейнер» будет <body>, но добавление вышеупомянутого делает .outsideпозиционированным.

— Таблетки взрыва
источник