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
джерело

Зовнішні потребиposition: relative;

— імператив

відносно, так, і тоді він не знає, наскільки великим він повинен бути для вмісту дочірнього вмісту, на жаль, тому, якщо це не є статичним значенням, повернутися до початкового питання. Як розмістити один 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. СПАСИБІ!

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

Абсолютний насправді шукає найближчого (= статичного) предка, розташованого за замовчуванням, який часто є відносно розташованим. Він також не повинен бути прямим батьком, але, наприклад, може бути бабусею та дідусем.

— mzwaal

Це залежить від постійної висоти, яка ДУЖЕ БАГА. Проста зміна шрифту, розміру шрифту, прокладки, поля та бог знає, що ще потрібно для експерименту, щоб відгадати нову висоту.

— Андерсон

Призначають position:relativeдо .outside, а потім position:absolute; bottom:0;до вашого .inside.

Так:

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

— дсгрифін
джерело

це може бути основою для липкого колонтитула, чи не так?

— cade galt

Я не можу використовувати позицію: абсолютна; для другої діви. це моє обмеження, чи можете ви дати мені інші варіанти?

— Піюш Доларія

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

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

"Початковий контейнер" був би <body>, але додавання вищезгаданого робить .outsideпозиційним.

— Вибухові таблетки
джерело